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

Question

我正在使用 React on Rails 处理一个小型个人项目。我对这两件事都很陌生。

我有一个反应组件，它是一个表单。我还有另一个组件，它有一些输入，用户可以根据需要添加任意数量的输入。使用添加属性按​​钮。我正在尝试保存添加的每个输入的状态。我可以让组件本身保存状态，但是我如何将它与发生在 onClick 的 fetch post 请求一起发送？

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

https://reactjs.org/docs/context.html https://redux.js.org/basics/usagewithreact

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

  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;

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

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;

Answer 1

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

产品创建

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

属性

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