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

Posted 2023-02-22

【中文标题】React 在两个组件之间传递多状态

【英文标题】：React pass multi state between two components

【发布时间】：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 ?

【参考方案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 方法并使用参数渲染不同的输入来实现你的目标