如何在formField ReactJs中设置输入值答案

【问题标题】：how to set Input value in formField ReactJs如何在formField ReactJs中设置输入值
【发布时间】：2019-11-13 00:42:22
【问题描述】：

我无法为表单中的输入字段设置值。下面是我的代码。甚至我也试图在输入元素中的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>
            );
        }
    }

【问题讨论】：

您似乎在使用 Ant-Design。您能否包括您的导入、标签问题和调整标题？

标签： javascript reactjs forms input

【解决方案1】：

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

state = {
    companyCode: ''
 };

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

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

你可以在渲染函数之外定义handleChange函数。此外，您可以使用箭头函数来避免绑定到 this。这是一个例子：

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

了解更多关于 events 的反应。

【讨论】：

【解决方案2】：

不确定您的Input 组件是如何设计的，但您似乎将对象作为value 传递。

您将companyCode 设置为对象：

companycode: { value: ''}

所以你应该这样使用它：

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

【讨论】：

【解决方案3】：

antd 的双向绑定 getFieldDecorator 不适用于嵌套状态 (company.companyCode)。您可以在 https://ant.design/components/form/#Form.create(options) 上找到文档

尝试将companyCode 与setFieldsValue 一起分配和使用。

  setFieldsValue({
    companyCode: response.companyCode,
  });

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

【讨论】：

感谢您的想法。实际上，如果我只在 form.item 中使用输入标签，则会显示该值。但如果我使用 {getFieldDecorator} 则该值不会显示...
如果我尝试编辑值。值没有改变......即使我创建了handlechange函数。似乎显示的 db 值被视为输入值中的对象。
我的错。 setFieldsValue，而不是 setState。更新。请记住，您不必使用 Ant 的表单库。您可以将值保存在 state 中或添加诸如 Formik 或 React-Final-Form 之类的东西。