Question

我有一个元素列表和一个表单（用于创建/更改元素）。通过反应，我将其表示为以下

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

每个列表元素都有一个更改按钮。单击它，获取元素字段值。如何使用元素值填充表单字段（不使用Redux）？

Answer 1

您需要管理父组件中的状态：

1）单击列表元素时更改状态 2）通过添加属性

将state元素传递给表单组件

...
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}/>

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

2 个答案: