Question

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

但是多状态呢？

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

我尝试过这样编辑

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

和

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

没有运气。

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

Answer 1


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

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

我们可以设置renderInput方法并使用参数呈现不同的输入以实现您的目标

Answer 2

不需要在子代和父代中都保持状态。您可以像下面这样编写子组件，并可以使用 data-attirb 动态访问两个状态，也可以按照@Isaac的答案进行操作。将状态保留为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

在两个组件之间进行反应传递多状态

2 个答案: