Question

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

所以我想要实现的是具有预定义的值，例如＆＃34; @ gmail.com＆＃34;这样用户只需添加其电子邮件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);

Answer 1

为什么不使用Component

执行此类操作

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

使用AntDesign实现表单

1 个答案: