Question

通常我的表单很长，我想将它们用作单独文件中的组件，我尝试这样做，但是我无法再修改值，我的意思是此配置中有两个步骤，

首先，我需要从API提取请求中传递初始值，我使用了如下所示的道具：

// in parent

   <InvoiceDetails {...this.state} />

// in component

...

render() {
let { invoicenumber, ponumber, invoicedate, paymentdue, loading } = this.props;
 return (
   <div>
   {!loading ?
   <Form>

   <Input fluid value={invoicenumber}
   type="text" onChange={this.handleForm}
   placeholder="Invoice number" name="invoicenumberEdit" />

   <DateInput
   autoComplete="off"
   name="invoicedate"
   placeholder="Invoice date"
   dateFormat='MMMM Do YYYY'
   value={invoicedate}
   clearable icon={false}
   clearIcon={<Icon name="remove" color="black" />}
   onChange={this.handleInvoiceDate}
   />

   ...

更新这些输入的函数正在更改父状态，因此我无法将它们移至组件文件，因为那将是两个单独的状态。

   handleInvoiceDate = (event, { name, value }) => {
      if (this.state.hasOwnProperty(name)) {
         this.setState({ [name]: value });
      }
   }

   handleForm = e => {
      this.setState({ [e.target.name]: e.target.value });
   };

我不使用上下文，redux或类似的东西。如果可能，我该如何解决？

Answer 1

在您的父母中，将您的处理程序设为这样的纯设置状态

handleInputChange = (name, value) => {
   this.setState({ [name]: value });
};

然后将您的处理程序作为这样的道具传递

<InvoiceDetails {...this.state} handleInputChange={this.handleInputChange} />

然后在您的组件中，将这些功能添加到您的代码中

 handleInvoiceDate = (event, { name, value }) => {
    if (this.state.hasOwnProperty(name)) {
       this.props.handleInputChange(name, value);
    }
 }

 handleForm = e => {
    this.props.handleInputChange(e.target.name, e.target.value);
 };

Answer 2

在React.js中使用表单时，输入字段具有其自己的状态，无论我们在其中输入什么内容，都将存储在输入字段中。我们应该摆脱输入字段的状态，而仅依赖状态对象。您希望拥有单一的事实来源，这是React中的核心概念之一。

输入字段应为受控元素。受控元素没有自己的状态，它们通过props获取所有数据，并且通过引发事件来通知数据更改。由于我需要父组件中的更多代码，因此我将键入父组件中应包含的内容表单中有一个处于状态的对象：

//parent.js
state={formData:{invoiceNumber:"",paymentdue:"",...,.....,}}
//handle change dynamically
 handleChange=e=>{   
   const formData={...this.state.formData}
   formData[e.currentTarget.name]=e.currentTarget.value
   this.setState({formData})}
<Input fluid value={this.state.formData.invoiceNumber} //input for invoice 
number
   type="text" onChange={this.handleForm}
   placeholder="Invoice number" name="invoicenumberEdit" />

设置后，您应该创建input.js组件，并将所有输入字段移到其中，并通过道具传递数据。表单可以很容易地设计成具有可重用组件，而不管它们有多长。

您应该一次创建一个具有可重用组件的表单，并在以后的所有项目中使用它们。您要做的就是更改其他项目的数据和验证架构。

Answer 3

只需像props那样将函数的功能从父组件传递到子组件，

<InvoiceDetails {...this.state} handleForm={this.handleForm} handleInvoiceDate={this.handleInvoiceDate}/>

函数位于父级

handleInvoiceDate = (name, value ) => {
   if (this.state.hasOwnProperty(name)) {
      this.setState({ [name]: value });
   }
}

handleForm = (name, value) => {
   this.setState({ [name]: value });
};

在您的组件中调用这些函数，就像

<Input fluid value={invoicenumber}
   type="text" onChange={(e)=>this.props.handleForm(e.target.name,e.target.value)}
   placeholder="Invoice number" name="invoicenumberEdit" 
/>

<DateInput
   ...
   onChange={(e)=>this.props.handleInvoiceDate(e.target.name,e.target.value)}
/>

我可以将表单输入放入React组件吗？

3 个答案: