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

state需要始终保留在父级中，然后通过props
子组件通常是无状态的，这意味着它们不需要是class（可以只是一个返回jsx的函数）并且导入最多，不能有{ {1}}（状态仅适用于state）

始终将状态传递给子组件 因为无论Class components向下多远，通过state 传递它将始终更改源，在这种情况下是父级，状态的创建者

另一件重要的事情：

如果您使用箭头功能ES6，则无需props来绑定您的功能。

像这样：constructor

另一件事：

您不需要handleSomething = () => { return ... }来设置constructor，您只需执行

state

并自动成为上下文state = { }
的一部分
以这种方式思考，你永远不会失败。

希望它能帮到你:)

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

我是通过将Parent的方法传递给child作为道具来实现的。然后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);
}

如何更新父母的州？

3 个答案: