Question

如何为该组件中相同组件类型的所有实例设置setState。

在ParentComponent

中

render() {
     return(
          <ChildComponent ... />
          <ChildComponent ... />
          <ChildComponent ... />
      );
}

在ChildComponent中

//onClick Handler should set state of all instances
onClick() {
    this.setState({value: ''})
}

Answer 1

如果您有多个子组件使用的value，那么正确的方法是将该值提升一级（即在父级中），并将该值作为prop传递给这些子级这样所有孩子都拥有相同的价值。因此，在父级中保留state并将其作为道具传递给像这样的孩子

onClick() {
  this.setState({value: ''})
}
render() {
     return(
          <ChildComponent value={this.state.value} onClick={this.onClick}... />
          <ChildComponent value={this.state.value} onClick={this.onClick}... />
      );
}

Answer 2

由于你想要在所有子实例中使用相同的状态，我说你想要做的事实上是在父类中设置状态，然后将其作为道具传递给所有子节点。您在父级中需要一个单击处理程序方法，您也可以将其传递给子级。

好的，我还没有测试过这段代码，但基本的逻辑就像是：

父

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {
        "value": "" // assuming 'value' is a string
    }
}

handleClick(value) {
    this.setState({ "value": value })
}

render() {
    return(
       <ChildComponent
           handleClick={this.handleClick}
           value={this.state.value} />
       <ChildComponent
           handleClick={this.handleClick}
           value={this.state.value} />
       <ChildComponent
           handleClick={this.handleClick}
           value={this.state.value} />
   )
}

孩子（因为你谈论一个孩子的状态，把它设置为有状态的组件，而不是表示组件）

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {
        "value": "" // assuming 'value' is a string
    }
}

componentWillReceiveProps(nextProps) {
    this.setState( {"value": nextProps.value} )
}

handleClick() {
    const value = "Hey here's a value!"
    props.handleClick(value) // call the parent's handleClick
}

render() {
    return(
        <div>
            <button onClick={this.handleClick}>Set value</button>
        </div>
   )
}

但是说实话，我甚至不打算在孩子中设置状态 - 只需在父母中设置它并通过props访问它。

Answer 3

好的，所以......

我正在研究某种选择器。有3个相同类型的组件。每个组件存储不同的状态。状态取决于输入字段中输入的用户（与react-autosuggest结合使用）。用户填充3个输入，并选择1个渲染图像取决于状态。用户单击图像后，应清除所有输入（值处于状态）。

我让它工作但不满意

这与redux

结合使用

父

我为每个组件创建了一个ref并将一个实例保存到他的状态并传递回调以触发所有子实例中的方法。

class Parent extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.clearAllInputs = this.clearAllInputs.bind(this) // coz callback returns child own props
    }

    componentDidMount() {
        this.setState({
            firstChild: this.firstChild.getWrappedInstance(),
            secondChild: this.secondChild.getWrappedInstance(),
            thirdChild: this.thirdChild.getWrappedInstance(),
        })
    }

    clearAllInputs() {

        //call methods from all child instances

        this.state.firstChild.clearInput();
        this.state.secondChild.clearInput();
        this.state.thirdChild.clearInput();
    }

    ...

    render() {
        return(
            <Child ref={ context => this.firstChild = context } clearAllInputs={this.clearAllInputs} ... />
            <Child ref={ context => this.secondChild = context } clearAllInputs={this.clearAllInputs} ... />
            <Child ref={ context => this.thirdChild = context } clearAllInputs={this.clearAllInputs} ... />
        );
    }

    ...

}

class Child extends Component {

    ...

    clearInput() {
        this.setState( { value : '' } );
    }

    render() {
        return(
            ...
            <img ... onClick={ this.props.clearAllInputs } />
        );
    }

}

export default connect(state, null, dispatchers, { withRef: true })(Child);

如何为该组件中相同组件类型的所有实例设置setState

3 个答案: