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

Question

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

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