web-dev-qa-db-ja.com

React | Ant設計選択デフォルト値

私のプロジェクトでは ant design を使用しています。

ここに、動的フィールドとしての選択があります。 selectのデフォルト値を設定しようとしたとき。機能しません。

<Select defaultValue="lucy">
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

Defaultvalueをlucyに設定していますが、機能しません

複製コード： https://codesandbox.io/s/6x3qv6wymr

javascriptreactjsantd
6
Selvin

ドキュメント によれば、valueまたはdefaultValueをgetFieldDecoratorと一緒に使用しないでください。

GetFieldDecoratorによってラップされた後、value（またはvaluePropNameによって定義された他のプロパティ）onChange（またはトリガーによって定義された他のプロパティ）プロパティがフォームコントロールに追加されます。フォームデータの流れはFormによって処理されます。

  1. OnChangeを使用してデータを収集するべきではありませんが、onChange（など）イベントをリッスンすることはできます。

  2. 値defaultValue propを介してフォームコントロールの値を設定することはできません。代わりにgetFieldDecoratorのinitialValueでデフォルト値を設定する必要があります。

  3. SetStateを手動で呼び出すべきではありません。this.props.form.setFieldsValueを使用してプログラムで値を変更してください。

したがって、コードでは、次のようにinitialValueの代わりにdefaultValueを定義する必要があります。

{getFieldDecorator(`names[${k}]`, {
        validateTrigger: ["onChange", "onBlur"],
        initialValue: "lucy",
        rules: [
          {
            required: true,
            whitespace: true,
            message: "Please input passenger's name or delete this field."
          }
        ]
      })(
        <Select>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
      )}

codesandbox.io で動作デモを確認できます。

18
Triyugi Narayan Mani

「getFieldDecorator」の問題。削除すると、すべて問題ありません。そこでpbを検索します。React| Antに問題はありません

0
Denis Kuratovich