时间戳

首页 > 解决方案 > 在 React 中，如何更新支持状态为数组的文本表单字段？

arrays - 在 React 中，如何更新支持状态为数组的文本表单字段？

问题描述

我正在创建一个 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

设置句柄输入更改功能以便我可以正确记录状态下的用户输入的正确方法是什么？

标签： arraysreactjsformscomponents

解决方案

TLDR：当您将其作为道具传递时，handleTypeChange 方法将无法访问类组件 (this)。

在类组件中将类方法作为 prop 传递时，有两种处理“this”的方法：

将“this”绑定到构造函数中的方法（handleTypeChange）

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

或将箭头函数传递给 handleChange 道具，如下所示：

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

更新：

合并里面的状态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 }] }
    });
  }

查看我的代码框以获取更完整的示例。

推荐阅读