如何使用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}/>