Question

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

代码看起来像这样。

＆＃13;

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)
);

＆＃13;

我知道我不能以这种方式调用this.setState（），但我不知道如何将该函数绑定到组件内的对象内部。我做了很多研究，似乎无法找到解决方案。我不知道是不是因为我没有遵循良好做法。

提前致谢

Answer 1

我找到了解决方案。我只是直接在组件的render函数中将对象从对象中移出，而不是做一些复杂的事情，从而可以连接到状态。

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

1 个答案: