将函数从对象传递到组件以编辑状态

Question

我有一个 FIELDS 对象，其中包含许多字段（也是对象）的设置，这些字段将用于使用函数 renderField 在我的页面中构建输入字段。其中一些字段需要一个功能来编辑组件的状态。我需要它能够在用户填写表格时进行某种自动完成。

代码如下所示。

import React from 'react';
import {Field,reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import _ from 'lodash';

// objects that will be used to create the form
const FIELDS = {
  first_name: {
    type: 'text',
    label: 'First name',
    onChange: function(e){
      this.setstate({first_name:e.target.value})
  },
  last_name: {
    type: 'text',
    label: 'last name',
    onChange: function(e){
      this.setstate({last_name:e.target.value})
  },
  ...
  }
  
  class App extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        first_name : '',
        last_name : '',
        birth : '',
        sex:''
      };
    }
    
    renderField(field) {
      const fieldConfig = FIELDS[field.input.name];
      const {meta: {touched, error}} = field;

      return (
        <div className={`form-group ${touched && error ? 'has-danger' :''}`}>
          <br />
          <label>{fieldConfig.label}</label>
          <input
            {...fieldConfig}
            {...field.input}
          />
          <div className='text-help'>{touched ? error : ""}</div>
          <br />
        </div>
      );
    }

    onSubmit(){
        ...
    }

    render() {
      const {handleSubmit} = this.props;
      return (
        <div>
         <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            { _.keys(FIELDS).map( key => {
              return <Field name={key} key={key} component={this.renderField} />;
              })
            }

          <button type='submit'>Submit</button>
        </form>
      </div>
    )
  }
}

export default reduxForm({
  // validate,
  form: 'Form example'
})(
  connect(null)(App)
);

我知道我不能这样调用 this.setState()，但我不知道如何将函数绑定到组件内的对象内。我做了很多研究，似乎找不到解决方案。不知道是不是我没有遵循好的做法。

提前致谢

Answer 1

我找到了解决办法。我没有做一些复杂的事情，而是直接将函数从对象中移到组件的渲染函数中，使与状态的连接成为可能。

将函数从对象传递到组件以编辑状态

Passing a function from an object to the component to edit the state

state

reactjs

redux

redux-form