如何更新父母的状态？

Question

我是新来的反应，并试图更新父母的状态，但没有运气到目前为止。

组件

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

其他容器，我想利用这个组件来切换密码

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

你可以这样做：

首先，家长组件：

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> 
    ); 
    } 
} 

现在孩子组件：

import React from 'react'; 

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

1. 的state需要永远留在父母然后将其传递给props
2. 孩子部件通常是无状态的，这意味着，他们并不需要是一个class（可以只是返回jsx功能）以及最进口，不能有state（状态只在Class components可用）

总是向下通过国家儿童组件 因为不管多远下来state，通过正在通过props通过它会永远改变源，在这种情况下是父，创造者的状态

另一件重要的事情：

如果您使用箭头函数ES6，则不需要有constructor来绑定您的函数。

像这样：handleSomething =() => { return ... }

另一件事：

你不需要constructor设置state，你可以简单地做

state = { } 

，并自动成为环境的一部分this

用这种方式思考你永远不会失败。

希望它可以帮助你:)

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> 
    } 
} 

我做到了通过让家长方法对儿童的道具。然后Child使用这个方法来改变Parent的状态。它被称为回调函数。

For More References

我认为这是对您有用。

Answer 3

一个更通用的（但可能是不错的办法）。父类有一个函数作为回调函数传递给子代，并允许子代直接调用setState。我只能看到它在一个有几个孩子的紧密绑定的小组件中有用，或者只是用于验证概念代码。

/** 
    * 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); 
}