如何使用React将列表中的数据发送到表单中？

Question

我有一个元素和窗体列表（用于创建/更改元素）。随着反应我代表它如下

... 
render() { 
    return (
     <div> 
      <List/> 
      <Form/> 
     </div> 
    ) 
} 
... 

每个列表元素都有一个更改按钮。点击它，获取元素字段值。我如何填写元素值的表单字段（没有Redux）？

Answer 1

需要在父组件来管理的状态：

1）改变状态时列表元素被点击
2）通过添加属性

发送所述状态元素的形式部件

... 
constructor(props) { 
    super(props); 
    this.state = {} 
    this.fillForm = this.fillForm.bind(this); 
} 


fillForm(element) { 
    this.setState({ 
     element: element 
    }); 
} 


render() { 
    return (
     <div> 
     <List onElementClick={this.fillForm} /> 
     <Form element={this.state.element}/> 
     </div> 
    ) 
} 
... 

在列表分量，在元素被点击你要调用这个函数this.props.onElementClick(elementClicked)

在表组件，您可以得到这个属性this.props.element

Answer 2

这不是你问的。我只是纠正你的错误。

render() {//wrong 
    return (
     <List/> 
     <Form/> 
    ) 
} 

您不能返回多个组件。您需要将所有组件包装在一个元素中。 例如：

render() { 
    return (
<div> 
     <List/> 
     <Form/> 
</div> 
    ) 
} 

编辑：填写表单域元素的数据，你需要传递组件数据作为道具。

<Form data={this.state.data}/>