React 在两个组件之间传递多状态答案

【问题标题】：React pass multi state between two componentsReact 在两个组件之间传递多状态
【发布时间】：2019-07-24 21:32:01
【问题描述】：

我发现了一个关于如何在两个组件之间传递状态的gist。

这里是jsbin

但是多态呢？

我想要两个输入字段，并在我编辑时在其他组件中显示输入的文本。

我试过这样编辑

this.state = {
  fieldVal: "" //first input state
  otherFieldVal: "" //second
}

和

  //input onChange
  onUpdate = name => (event) => {
    this.setState({ [name]: event.target.value });
  };

没有运气。

如何让它在多输入字段的多状态下工作？

【问题讨论】：

您是否正在寻找类似jsbin.com/locoqisaqo/edit?js,output 的解决方案？
很酷，但是如果我有很多输入和状态并且我不想重复自己通过passedVal1={this.state.fieldVal1}、passedVal2={this.state.fieldVal2} 和3和 4，在这种情况下我可以使用 this.setState({ [name]: event.target.value }) 吗？我不知道该怎么做。
你能检查一下我的答案吗？并查看此演示 stackblitz.com/edit/react-fsrkp2 ?

标签： reactjs state

【解决方案1】：

不需要在 Child 和 parent 中都保留状态。您可以像下面这样编写您的子组件，您可以使用 data-attirb 动态访问两个状态，或者您可以按照@Isaac 的回答。将状态保留在 Child 并将状态传递给 Parent 或 keep事件从 Child 到 Parent。

 export class Child extends React.Component {

  update = (e) => {
    this.props.onUpdate(e.target)
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
         data-state = "fieldVal"
          value={this.props.fieldVal}
        /><br/><br/>
      <input
          type="text"
          placeholder="type here"
          onChange={this.update}
      data-state = "otherFieldVal"
          value={this.props.otherFieldVal}
        />
      </div>
    )
  }
}

export class OtherChild extends React.Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props passedVal1: {this.props.passedVal1} <br/>
      Value in OtherChild Props passedVal2: {this.props.passedVal2}
      </div>
    )
  }
}

在父母中：

class App extends Component {

  onUpdate = (data) => {
    this.setState({
      [data.dataset.state]: data.value
    })
  };

  render() {
    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State fieldVal: {this.state.fieldVal} <br/>
        Value in Parent Component State otherFieldVal: {this.state.otherFieldVal}
        <br/>
        <Child onUpdate={this.onUpdate} fieldVal= {this.state.fieldVal} otherFieldVal ={this.state.otherFieldVal}/>
        <br />
        <OtherChild passedVal1={this.state.fieldVal} passedVal2={this.state.otherFieldVal}/>
      </div>
    );
  }
}

demo

【讨论】：

很好，我改为使用 'state={this.state}' 传递状态并使用 '{this.props.state.fieldVal}' 显示状态，所以我现在不必重复自己如果我有 100 个输入和状态 :) 有没有另一种好方法来做同样的结果？
是的，还有其他选择，现在也会建议 :)
检查这个stackblitz.com/edit/react-ydyazj，你可以在一个数组中存储N个输入值，这个例子证明了这一点。

【解决方案2】：


renderInput = (prop) => {
  return (
    <Input 
      onChange={(event) => {
        this.setState({ [prop]: event.target.value });
      }}
    />
  )
}

render() {
  <div>
    {this.renderInput('name')}
    {this.renderInput('age')}
  </div>
}

我们可以设置一个renderInput 方法并使用参数渲染不同的输入来实现你的目标

【讨论】：