そのコンポーネントの同じコンポーネントタイプのすべてのインスタンスに対してsetStateを設定する方法

Question

そのコンポーネントの同じコンポーネントタイプのすべてのインスタンスに対してsetStateを設定する方法。あなたには、いくつかのvalue複数の子コンポーネントで使用されている場合のparentComponentで

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

ChildComponent

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

Answer 1

では、正しい方法がで（すなわち、その値1つ上のレベルに取ることです親）とその値を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

のように子供たちに小道具として渡します親の中で、子供のすべてに小道具としてそれを渡してください。親にはクリックハンドラメソッドが必要です。このメソッドは子供にも渡します。

[OK]を、私はこのコードをテストしていませんが、基本的なロジックのようなものになります。

親

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

しかし、真実が語られるステートフルなコンポーネントではなく、プレゼンテーションコンポーネント）ですが、私も子供の状態を設定する気にしないだろう - ちょうど親とACCEでそれを設定しますそれはprops経由です。

Answer 3

[OK]を、ので...私はピッカーのいくつかの種類に取り組んでいます。 同じタイプのコンポーネントが3つあります。各構成要素は異なる状態を記憶する。 状態は、入力フィールドに入力したユーザー（react-autosuggestと組み合わせたもの）によって異なります。 ユーザーは3つの入力を入力し、状態に応じてレンダリングされる1つのイメージを選択します。 ユーザーが画像をクリックした後、すべての入力をクリアする必要があります（値は状態です）。

Iは

満足し、これはReduxの

親

と組み合わされRLY作業ではないが、私は、各コンポーネントへの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);