Question

我正在使用Ant-d表单验证来进行React表单，其中创建和编辑都以相同的形式完成，这使我对如何管理React中的状态感到困惑，我需要对所有字段都应用getFieldDecorator并管理它们表单中的状态以及this.props.form中的setValues如何设置。请帮助我。如果问题有任何疑问，请帮助我进行改进。

 class OffersForm extends Component {
   constructor(props) {
   super(props);
    this.state = {
      offer: this.props.offer,
    };
    this.handleSave= this.handleSave.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
  }

  componentWillMount(){
    if(!this.state.isNew){
    const offer = this.props.offer
    }
  }

 componentDidMount() {
   this.getOffers();
  }

  getOffers=() =>{
    if (this.props.offer) {
     this.setState({
       offer: this.props.offer
        }, () => {
       this.props.form.setFieldsValue(Object.assign({}, 
                                    this.props.offer));
         },()=>console.log("Props Values"+ getFieldsValue));
       }
      };

  handleOnChange(element, value) {
   const offer = Object.assign({}, this.state.offer, { [element]: 
                   value })

    this.props.form.setFieldsValue({
      offer
    }); 
    this.setState({ offer }) 
  }

  handleSave() {
    this.props.form.validateFields((err, values) => {
    if (!err) {
      this.setState({ inProgress: true })
        } 
  } 

  render() {
    const { getFieldDecorator } = this.props.form;          
     return (
       <div>
         <Form>
           <Row gutter={16}>
             <Col xs={24} sm={24}>
               <Form.Item label={I18n.t('general.name')}>
                 { getFieldDecorator(
                    'name', {
                      initialValue:offer.name,
                      rules: [{required:true, message:'Please Enter 
                                Name'}],
                       })
                        ( <Input
                            value={offer.name}
                            onChange={e => 
                                      this.handleOnChange('name', 
                                       e.target.value)}
                            />)}
                  </Form.Item>
              </Col>
            </Row>
            <div>
              <Row>
                <Col xs={12} sm={12}>
                  <Form.Item label={I18n.t('general.phone_number')}>
                    { getFieldDecorator('action_to', {
                       initialValue:offer.action_to,
                       rules: [{required:true, message: 'Please 
                                          Enter Phone Number'}],
                     })
                    (<Input
                        onChange={e => 
                        this.handleOnChange('action_to', 
                             e.target.value)}
                    />)}
                 </Form.Item>
                </Col>
              </Row>
            </div>
        <Row>
          {FormErrors(this.state.errors)}
        </Row>
         <Row>
           <Col span={24}>
              {FormButtons(this.state.inProgress, this.handleSave, 
                    this.props.onCancel)}
           </Col>
         </Row>
        </Form>
       </div>
       );
      }
      }
      export default Form.create()(OffersForm);

错误

        Warning: You cannot set a form field before rendering a 
        field associated with the value.

Answer 1

您从问题中删除的警告：

警告：getFieldDecorator将覆盖value，因此请不要直接设置value并使用setFieldsValue 进行设置。

关于以下代码部分：

           <Form.Item...
             { getFieldDecorator(
                    ( <Input
                        value={offer.name}
                        ...

并且可以通过删除value={offer.name}部分来解决。

Answer 2

不需要onChange函数来设置this.props.form.This中的值。是警告的原因

警告：您无法在渲染与以下内容关联的字段之前设置表单字段价值。

   <Row>
    <Col>
     <Form.Item label={I18n.t('general.email')}>
              { getFieldDecorator('action_to', {
                 rules: [
                   {type: 'email', message: 'The input is not valid E-mail!'},
                   {required:true, message: 'Please Enter Email'}],
                })
                (<Input/>)
              }
      </Form.Item>
     </Col>
    </Row>
    <Row>
     <Col>
      <Form.Item label={I18n.t('general.name')}>
          { getFieldDecorator('name', {
            rules: [{required:false, message:'Please Enter Name'}],
            })
            (<Input />)
          }
       </Form.Item>
     </Col>
   </Row>

我们可以使用getFieldsValue（）获得this.props.form的值 const formData = this.props.form.getFieldsValue（）;

React表单中的Ant-d表单验证，其中创建和编辑都以相同的形式完成

2 个答案: