Question

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

我有一个反应成分，是一种形式。我还具有另一个组件，该组件具有一些输入，用户可以根据需要添加任意多个输入。使用添加属性按钮。我试图保存添加的每个输入的状态。我可以让组件本身保存状态，但是如何将其与onClick发生的提取后请求一起发送呢？

我已经查看了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中使用该属性。进行以下编辑。我还建议您是否不想持续更新每个键入的使用反跳字符的状态。

ProductsCreate

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

属性

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

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

1 个答案: