使用 Ant Design 响应表单答案

【问题标题】：React Form Using AntDesign使用 Ant Design 响应表单
【发布时间】：2017-10-15 22:21:15
【问题描述】：

我一直在尝试使用 Ant Design 创建一个表单来进行反应。而且我是新手，所以无法解决这个问题。

所以我想要实现的是有一个预定义的值，比如“@gmail.com”，这样用户只需要添加他的电子邮件 ID 的剩余部分。

Text Field where I want to add the predefined value

    const { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } = antd;
    const FormItem = Form.Item;
    const Option = Select.Option;
    const AutoCompleteOption = AutoComplete.Option;

    class RegistrationForm extends React.Component {
      state = {
        confirmDirty: false,
        autoCompleteResult: [],
      };

  handleWebsiteChange = (value) => {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
    }
    this.setState({ autoCompleteResult });
  }

      render() {
        const { getFieldDecorator } = this.props.form;
        const { autoCompleteResult } = this.state;

        const websiteOptions = autoCompleteResult.map(website => (
          <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
        ));

        return (
          <Form onSubmit={this.handleSubmit}>
            <FormItem
              {...formItemLayout}
              label="E-mail"
              hasFeedback
            >
              {getFieldDecorator('email', {
                rules: [{
                  type: 'email', message: 'The input is not valid E-mail!',
                }, {
                  required: true, message: 'Please input your E-mail!',
                }],
              })(
                <Input />
              )}
            </Form>
        );
      }
    }

    const WrappedRegistrationForm = Form.create()(RegistrationForm);

    ReactDOM.render(<WrappedRegistrationForm />, mountNode);

【问题讨论】：

www.stackoverflow.com/help/mcve

标签： reactjs antd

【解决方案1】：

你为什么不对你的组件做这样的事情

import { Select } from 'antd'; 
const Option = Select.Option; 
class App extends React.Component { 
state = { options: [], } 
handleChange = (value) => { let options; if (!value || value.indexOf('@') >= 0) { options = []; } else { options = ['gmail.com'].map((domain) => { const email = `${value}@${domain}`; 
    return <Option key={email}>{email}</Option>; }); } this.setState({ options }); } 
    render() { // filterOption needs to be false，as the value is dynamically generated return ( <Select
                    mode="combobox"
                    style={{ width: 200 }}
                    onChange={this.handleChange}
                    filterOption={false}
                    placeholder="Enter the account name"
                  > {this.state.options} </Select> ); } }
     ReactDOM.render(<App />, mountNode);

【讨论】：