Question

在React应用中，表单中有3个字段。

使用值，茶和咖啡下拉列表（在选择“茶/咖啡字段2和3”时应显示）
茶/咖啡名称
茶/咖啡量

我正在使用setState设置一个状态，以识别所选择的是茶还是咖啡。

发布时效果很好。但是我正在使用相同的表单进行更新。

仅字段1会加载实际值。但是字段2和字段3没有加载值，也没有读取任何值。

...
<Form onSubmit={this.props.hanleSubmit(this.onSubmit)}>
  <Field name="drink" type="select" onChange={(e) => {
   if (e.target.value === 'T') {
     this.setState({isTea: true})
   } else {
     this.setState({isTea: false})
   }
  }}component={renderField}>
    <option value="" disabled>select any</option>
    <option value="T">Tea</option>
    <option value="C">Coffee</option>
  </Field>
  {
    this.state.isTea && ...Field for Tea name and Field for Tea Qty...
  }
  {
    !this.state.isTea && ...Field for coffee name & field for coffee qty...
  }
</Form>

并在componentDidUpdate中进行更新

如果数据采用这种格式

   data = {
     drink: 'T',
     teaName: 'Green tea',
     coffeeName: null,
     teaQty: '4',
     coffeeQTy: null
  }

  ComponentDidUpdate(prevProps, prevState) {
    ...
    if (data) {
      if (data.drink === 'T') {
        this.setState({isTea: true});
      } else {
        this.setState({isTea: false});
      }

      this.props.change('drink', data.drink);

      if (data.drink === 'T') {
         this.props.change('teaName', data.teaName);
         this.props.change('teaQty', data.teaQty);
      } else {
         this.props.change('coffeeName', data.coffeeName);
         this.props.change('coffeeQty', data.coffeeQty);  
      }
    }
   ...
  }

我需要为字段2和3正确加载数据，并且它应该可以正常工作以更改值。

Answer 1

最好使用https://redux-form.com/8.1.0/examples/selectingformvalues/，而不是手动使用setState。

下面的示例代码应允许您在编辑时保留表单配置的同时显示基于其他字段的字段。

如何在更新中使用相同表单时使用内部状态和Redux更新表单

1 个答案: