使用AntDesign的反应表格

Question

我一直在尝试创建一个使用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); 

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