Javascript 保存用户在React中添加的输入的状态

我正在使用React on Rails进行一个小型个人项目。这两件事我都是新手

我有一个react组件，它是一个表单。我还有另一个组件，它有一些用户可以根据需要添加的输入。使用添加属性按钮。我试图保存添加的每个输入的状态。我可以让组件本身保存状态，但是如何将它与单击时发生的fetchpost请求一起发送呢

我看过react的上下文API，但不知道这是否对我有帮助。而且我从来没有使用过redux，所以我可能也应该研究一下

我明白我不想进入这个状态。所以我试图弄清楚如何创建一个对象数组来保存每个输入对的输入值。但我似乎无法集中精力思考如何实施

  class ProductsCreate extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      upc: '',
      availableOn: '',
      inputs: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    if (e.target.name === 'name') {
      this.setState({ name: e.target.value });
    }
    if (e.target.name === 'upc') {
      this.setState({ upc: e.target.value });
    }
    if (e.target.name === 'date') {
      this.setState({ availableOn: e.target.value });
    }
  }

  submitData = () => {
    fetch(`/send_data`, {
      method: 'POST',
      body: JSON.stringify({
        name: this.state.name,
        upc: this.state.upc,
        availableOn: this.state.availableOn
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'same-origin'
    })
      .then(response => {
        return response.json;
      })
      .then(data => {
        console.log(data);
      });
  };

  clickHandler = e => {
    e.preventDefault();
    this.submitData();
  };

  appendInput = e => {
    e.preventDefault();
    const newInput = `input-${this.state.inputs.length}`;
    this.setState({ inputs: this.state.inputs.concat([newInput]) });
  };

  render() {
    return (
      <div className="form_container">
        <h1>Products</h1>
        <form>
          <label>Name</label>
          <input type="text" name="name" onChange={this.handleChange} />
          <label>UPC</label>
          <input type="text" name="upc" onChange={this.handleChange} />
          <label>Availiable On</label>
          <input
            type="text"
            name="date"
            placeholder="mm/dd/yyyy"
            onChange={this.handleChange}
          />
          <h1>Properties</h1>
          {this.state.inputs.map(input => (
            <Properties key={input} />
          ))}
          <button onClick={this.appendInput}>Add Properties</button>
          <button onClick={this.clickHandler}>Save</button>
        </form>
      </div>
    );
  }
}

export default ProductsCreate;

类产品创建扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
upc:“”，
可在以下位置获得：“”，
投入：[]
};
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
如果（e.target.name=='name'）{
this.setState（{name:e.target.value}）；
}
如果（e.target.name=='upc'）{
this.setState（{upc:e.target.value}）；
}
如果（e.target.name=='date'）{
this.setState（{availableOn:e.target.value}）；
}
}
提交数据=（）=>{
获取（`/send_data`{
方法：“POST”，
正文：JSON.stringify({
名称：this.state.name，
upc:this.state.upc，
availableOn:this.state.availableOn
}),
标题：{
“内容类型”：“应用程序/json”
},
凭据：“相同来源”
})
。然后（响应=>{
return response.json；
})
。然后（数据=>{
控制台日志（数据）；
});
};
clickHandler=e=>{
e、 预防默认值（）；
这个.submitData（）；
};
appendInput=e=>{
e、 预防默认值（）；
const newInput=`input-${this.state.inputs.length}`；
this.setState（{inputs:this.state.inputs.concat（[newInput]）}）；
};
render（）{
返回(
产品
名称
UPC
适用于
性质
{this.state.inputs.map（输入=>(
))}
添加属性
拯救
);
}
}
导出默认产品创建；

这是将在单击时添加的组件

import React from 'react';

class Properties extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="property_container">
        <label>Property Name</label>
        <input type="text" name="propertyName" />
        <label>Property Value</label>
        <input type="text" name="propertyValue" />
      </div>
    );
  }
}

export default Properties;

从“React”导入React；
类属性扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
属性名
财产价值
);
}
}
导出默认属性；

将句柄更改作为prop传递给Properties组件，然后在Properties组件的input onChange中使用该prop。进行以下编辑。我还建议，如果您不想连续更新每个键入字符的状态，请使用debounce

产品创建

      {this.state.inputs.map(input => (
        <Properties key={input} onChange={this.handleChange} name={input}/>
      ))}

{this.state.inputs.map（输入=>(
))}

性质

      <input type="text" name={this.props.name} onChange={this.props.onChange}/>

谢谢@Shubham！那么如何更新数组中特定输入的状态呢？我已经补充了你的建议。当我单击“添加输入”时，我会将一个对象添加到输入数组中，该数组现在具有空值。const newInput=

input-${this.state.inputs.length}：名称：“”，值：“”

@binarycycle更新了答案检查。我将名称作为一个道具传递，它是一个添加到输入名称的道具，当触发input onChange时，您将获得正在更新的输入的名称及其值，具体取决于您可以更新的状态。