Wie wird der Status der Eltern aktualisiert?

Question

Ich bin neu zu reagieren und versuchen, den Zustand der Eltern zu aktualisieren, aber bisher kein Glück.

Komponente

class InputBox extends Component { 
    constructor(props) { 
    super(props); 
    this.type = props.type; 
    } 
    render() { 
    return (
     <div> 
     <input type={this.type}/> 
     </div> 
    ); 
    } 
} 

Andere Container, in dem ich diese Komponente verwenden möchten, Passwort, indem ein Eltern Methode Kind als Requisiten

constructor(props) { 
    super(props); 
    this.state = { 
    type: 'password', 
    wording: 'Show', 
    }; 
    this.changeState = this.changeState.bind(this); 
} 

changeState() { 
    const oldState = this.state.type; 
    const isTextOrHide = (oldState === 'password'); 
    const newState = (isTextOrHide) ? 'text' : 'password'; 
    const newWord = (isTextOrHide) ? 'Hide' : 'Show'; 
    this.setState({ 
    type: newState, 
    label: newWord, 
    }); 
} 

<Wrapper> 
    <InputBox type={this.state.type} /> 
    <Toggle onClick={this.changeState}>{this.state.wording}</Toggle> 
</Wrapper> 

Answer 1

Sie können wie folgt tun:

Erste, Eltern-Komponente:

import React, { Component } from 'react'; 
import { InputBox} from './InputBox' 

class componentName extends Component { 
    state = { 
    password: '', 
    type: 'password', 
    wording: 'Show', 
    } 

    handleShow = (word) => { 
    this.setState({ wording: word }) 
    } 

    handleChange = (e) => { 
    if(!this.state.password){ 
     handleShow('Show') 
    } else { 
     handleShow('Hide') 
    } 
    this.setState({ password: e.target.value }) 
    } 

    render() { 
    return (
     <div> 
     <Wrapper> 
      <InputBox 
      name='password' 
      handleChange={this.handleChange} 
      password={this.state.password} 
      type={this.state.type} /> . 
      <Toggle onClick={this.changeState}>{this.state.wording} 
     </Toggle> 
     </Wrapper> 
     </div> 
    ); 
    } 
} 

Jetzt das Kind Komponente:

import React from 'react'; 

export const InputBox = (props) => (
    <input onChange={props.handleChange} value={props.password} type={props.type}/> 
) 

1. Die state Bedürfnisse immer in der Mutter bleiben und dann passiere es durch props
2. Die Kinder-Komponenten in der Regel staatenlos sind, was bedeutet, sie brauchen keine class (kann nur eine Funktion, die jsx zurückgibt) zu sein, und die Einfuhr, state nicht haben kann (Zustand ist nur in Class components)

passieren immer den Zustand bis auf Kinder Komponenten Denn egal, wie weit die state wird, durch durch props geleitet werden wird es immer die Quelle ändern, die in diesem Fall die Eltern, der Schöpfer des Staates

eine andere wichtige Sache:

Wenn Sie Pfeilfunktionen ES6 verwenden, brauchen Sie keine constructor, um Ihre Funktionen zu binden.

So: handleSomething =() => { return ... }

eine andere Sache:

Sie nicht die constructor müssen die state einstellen, können Sie einfach tun

state = { } 

und automatisch Teil des Kontextes werden this

Denken auf diese Weise werden Sie nie versagen.

Hoffe, es half Ihnen

Answer 2

class Child extends Component{ 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let { parentStateChange } = this.props; 
     return <input type='text' onChange={parentStateChange}/> 
    } 
} 

class Parent extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      content: "Something" 
     } 
     this.parentStateChange = this.parentStateChange.bind(this); 
    } 

    parentStateChange(event){ 
     let value = event.target.value; 
     this.setState({ 
      content: value 
     }) 
    } 

    render(){ 
     let { content } = this.state; 
     return <div> 
      <h2>{content}</h2> 
      <Child parentStateChange={this.parentStateChange}></Child> 
     </div> 
    } 
} 

Ich habe es zu wechseln. Dann verwendet Child diese Methode, um den Status von Parent zu ändern. Es wird als Callback-Funktion bezeichnet.

For More References

Ich denke, dies für Sie nützlich ist.

Answer 3

Ein allgemeineres (aber möglicherweise schlechter Ansatz) :). Die übergeordnete Klasse verfügt über eine Funktion, die als Callback an untergeordnete Elemente übergeben wird, und ermöglicht dem Kind, setState direkt aufzurufen. Ich kann das nur in einer eng gebundenen kleinen Komponente mit ein paar Kindern oder nur für einen Proof of Concept Code sehen.

/** 
    * This allows children to set state of this object. 
    * Might be a very bad approach, btw. 
    * 
    * @param {object} newState - object to update state. 
    * @param {func} cb - call back after state is updated. 
    */ 
doSetState = (newState, cb=null) => { 
    const merge = { ...this.state, ...newState }; 
    cb ? this.setState(merge, cb) : this.setState(merge); 
}