在React中，如何更新一个文本表单字段，其中的支持状态是一个数组？

Question

我正在创建一个React 16.13.0应用程序，并试图设计一个表单，提交到一个接受数据的端点，就像这样......。

{
        "name": "Test 8899",
        "types": [
            {"name": "Library"}
        ],
        "address": {
            "formatted": "222 W. Merchandise Mart Plaza, Suite 1212",
            "locality": {
                "name": "Chicago",
                "postal_code": "60654",
                "state": 19313
            }
        },
        ...

注意 "类型 "输入是一个项目数组。 所以我创建了一个FormContainer组件，其状态如下......。

class FormContainer extends Component {
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY

  constructor(props) {
    super(props);

    this.state = {
      countries: [],
      provinces: [],
      errors: [],
      newCoop: {
        name: '',
        types: [{
          name: ''
        }],

然后为类型组件本身创建了一个 "handleTypeChange "函数......。

  handleTypeChange(e) {
    let self=this
    let value = e.target.value;
    let name = e.target.name;
    //update State
    this.setState({newCoop: types[0].name = value}); 
  }

...
            <Input inputType={'text'}
               title= {'Type'} 
               name= {'types[0].name'}
               value={this.state.newCoop.types[0].name} 
               placeholder = {'Enter cooperative type'}
               handleChange = {this.handleTypeChange}

               /> {/* Type of the cooperative */}

然而，当我开始在字段中输入时，我立即得到一个错误信息

Line 96:29:  'types' is not defined  no-undef

如何正确设置我的handle input change函数，使我能够正确记录用户在我的状态下的输入？

Answer 1

TLDR：当你把它作为一个道具传递时，handleTypeChange方法将无法访问类组件（this）。

当在类组件中传递一个类方法作为道具时，有两种方法可以处理 "this"。

将 "this "绑定到构造函数中的方法（handleTypeChange）上。

constructor (props) {
  super();
  ...
  this.handleTypeChange = this.handleTypeChange.bind(this);
}

或传递一个箭头函数到handleChange道具，像这样。

handleChange = {(e) => this.handleChange(e)}

---

UPDATE:

来合并里面的状态 handleTypeChange你会这样做

  handleInput(e) {
    this.setState({
      // merge the rest of the state, then spread the love here
      newCoop: { ...this.state.newCoop, types: [{ name: e.target.value }] }
    });
  }

看我 代码和盒子 以获得更完整的例子。