Question

我无法在Form中将值设置为Inputfield。下面是我的代码。甚至我也尝试给出直接值，就像输入元素中的value='ABC'中那样。但没有运气。当我尝试在

之类的表单标签之外显示值时

<h1>{this.state.company.companyCode}</h1>

这显示了价值。但不在Form内。

    class UpdateCompany extends Component {

        constructor(props) {
            super(props);
            this.state = {
            companycode: { value: ''},
            company: ''
            };
            this.loadCompanydetail = this.loadCompanydetail.bind(this);        
        }

        loadCompanydetail(companyid) {
            GetCompanyById(companyid)
            .then(response => {
                this.setState({
                    company: response
                });
            }).catch(error => {
                if(error.status === 404) {
                    this.setState({
                        notFound: true,
                        isLoading: false
                    });
                } else {
                    this.setState({
                        serverError: true,
                        isLoading: false
                    });        
                }
            });        
        }

        componentDidMount(){        
            const companyid =this.props.match.params.companyId;
            this.loadCompanydetail(companyid);
        }

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

            return (
                    <h1 className="page-title">Edit Company - {this.state.company.companyCode}</h1>

                        <Form>
                            <Form.Item label="Company Code">
                                {getFieldDecorator('companycode', {
                                    rules: [
                                      {
                                        required: true,
                                        message: 'Please enter Code',
                                        max: 3,
                                      },
                                    ],
                                  })(<Input name="companycode" value={this.state.company.companyCode} />)}
                            </Form.Item>
                            <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                                <Button type="primary" 
                                    htmlType="submit" 
                                    size="large">Submit</Button>
                            </Form.Item>
                        </Form>
            );
        }
    }

Answer 1

您的问题似乎有点偶然。据我了解，您正在尝试在用户输入时设置输入字段的值。您需要在输入字段中使用 onChange 事件处理程序。另外，我建议您不要在状态内使用嵌套对象。这是一种简单的方法

state = {
    companyCode: ''
 };

现在，在输入字段的渲染函数中，您需要使用onChange处理程序：

<input type="text" name="companyCode" value={this.state.companyCode} onChange={this.handleChange} />

您可以在render函数之外定义handleChange函数。另外，您可以使用箭头功能来避免对此进行绑定。这是一个示例：

handleChange = e => {
    this.setState({ companyCode: e.target.value });
}

详细了解反应中的events。

Answer 2

不确定Input组件的设计方式，但似乎您正在将对象作为value传递。

您将companyCode设置为对象：

companycode: { value: ''}

所以您应该像这样使用它：

value={this.state.company.companyCode.value}

Answer 3

来自LOG_CHANNEL=mongolog的双向绑定getFieldDecorator不适用于嵌套状态（antd）。您可以在https://ant.design/components/form/#Form.create(options)

上找到文档

尝试将company.companyCode与companyCode一起使用和使用。

setFieldsValue

示例：https://codesandbox.io/s/romantic-dubinsky-ln4yu?fontsize=14

如何在formField ReactJs

3 个答案: