web-dev-qa-db-ja.com

antdデザイン選択プレースホルダーの問題

Reactアプリでantdデザインを使用しています。

これが私が問題に直面しているコードスニペットです：

<Select
     showSearch
     optionFilterProp = "children"
     placeholder = "Select Company"
     value = "{this.state.company}"
     name = "company"
     onSelect = "{this.handleCompanyChange}"
    >

これで、this.state.companyがnullでない場合に選択された正しい値が表示されます。ただし、this.state.companyがemptyまたはnullの場合、プレースホルダーは表示されません。

valueがnullの場合にプレースホルダーが表示されるように、この問題を解決するにはどうすればよいですか？

javascriptreactjsreduxcreate-react-appantd
9
FE_Addict

this.state.companyを未定義であるがnullに設定します。

7
afc163

AntdのForm.create（）を使用している場合は、フォームの値を設定/取得する別のクールな方法があります。このメソッドでは、コンポーネント（Selectなど）が<Form>要素内にある必要があることに注意してください。また、以下に示すように、囲んでいるクラスを小道具としてForm.create（）オブジェクトに渡す必要があります。

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(YourClassName));

このようにして、小道具でthis.props.formを使用できます。これには、以下に示すように、getFieldDecoratorという名前の重要な関数があります。

const { getFieldDecorator } = this.props.form;

すべての入力コンポーネントは、でラップする必要があります。以下を参照してください。

<FormItem>
   { getFieldDecorator('prefix', {
      initialValue: '86',
    })(
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    );}
</FormItem>

上記のように、これはフォーム要素に初期値を設定するためのより簡単な方法です。

関数内のフォーム要素の値をプログラムで設定する必要がある場合は、setFieldsValue、を使用できることに注意してください。 setFieldsなど。

getFieldsValue getFieldValue setFieldsValueなどを使用する前に、対応するフィールドがgetFieldDecoratorに登録されていることを確認してください。参照 https://ant.design/components/form /？locale = en-US＃Form-fields 調整されたコントロールの詳細については。例：

componentDidMount() {
    if (someCheckHere){
            this.props.form.setFieldsValue({
                company: userData.companyName
            })
    }
}
0
Abhay Shiro