Question

如何将数据传递到表单以在ReactJS中进行编辑？

我有3个组件，表格，表单和父组件。

return (
    <Table />
    <Form />
);

表格显示项目列表，每行都有一个编辑按钮

因此，当单击“编辑”按钮时，它将调用带有项目ID的编辑功能（使用道具从父级传递）。

this.props.edit('iAmTheIdOfTheItem');

编辑功能会将ID设置为父组件状态。

edit = (id) => {
    this.setState({ id })
}

所选项目将传递到Form组件。

<Form item={ items.find(item => item.id === this.state.id) } />

这应该以Form组件状态存储当前传递的数据。这样我就可以使用这些数据进行任何更改。

单击更新按钮时，会将状态传递给父组件。

可能的解决方案

componentDidMount

由于Form组件已经安装，我无法使用componentDidMount设置状态。

id && <表格

这可以帮助我使用componentDidMount。但是问题在于Form组件被包装在Modal组件中。因此，当我更新值并清除状态中的ID时，关闭动画将不起作用。

getDerivedStateFromProps

我可以将其用作最后的手段，但是对我来说这似乎是一个hack，我不确定是否真的需要这个。由于我有5个以上的表格，因此对我来说，将每个表格都添加进去似乎不太好。

还有更好的方法吗？有建议吗？

这应该会有所帮助 https://codesandbox.io/s/82v98o21wj?fontsize=14

Answer 1

您可以为此使用Refs。

使用ref={this.child}引用孩子，并将其传递给您的孩子组件，例如this.child.current.yourChildsFunction("object or data you want to pass")。现在，您可以使用像class Parent extends Component { constructor(props) { super(props); this.child = React.createRef(); } onClick = () => { this.child.current.fillForm("Jackie Chan"); }; render() { return ( <div> <button onClick={this.onClick}>Click</button> <br /> <br /> <Child ref={this.child} /> </div> ); } } class Child extends Component { constructor(props) { super(props); this.state = { name: "" }; } handleChange = ({ target }) => { this.setState({ [target.name]: target.value }); }; fillForm(passedvalue) { this.setState({ name: passedvalue }); } render() { return ( <form> <label for="name">Name</label> <input id="name" name="name" onChange={this.handleChange.bind(this)} value={this.state.name} /> </form> ); } }这样的子功能，然后在该子功能上，使用传递的数据来设置表单状态。

这是一个完整的例子。沙盒HERE

from django.urls import reverse_lazy
from django.views.generic import FormView
from django.contrib.messages.views import SuccessMessageMixin

class Index(SuccessMessageMixin,FormView):
    template_name = 'index.html'
    form_class = ContactForm()
    #name of your index view defined in urls.py
    success_url = reverse_lazy('name_of_your_index_view')
    success_message = "Success"


    #OPTIONAL:if you want some custom logic if the form is valid
    def form_valid(self, form):
        #custom logic here
        return super(Index,self).form_valid(form)

    #OPTIONAL:for custom logic if the form is invalid
    def form_invalid(self, form):
        #custom logic here
        return super(Index,self).form_invalid(form)

Answer 2

这是您的沙盒的更新版本：https://codesandbox.io/s/jprz3449p9

该过程非常基本：

您将已编辑的项目（通过道具）发送到表单中
表单以其自己的状态存储副本
更改表单时，它会更改本地表单状态
提交后，您会通过回调将状态发送给您的父母（此处onUpdate）

您所缺少的：

道具更改时刷新本地表单状态

if (!item || id !== item.id) {
  this.setState(item);
}

使用回调更新项目时通知父项

update = event => {
    event.preventDefault();
    this.props.onUpdate(this.state);
    this.setState(emptyItem);
};

如何将数据传递到ReactJS中的表单？

2 个答案: