[英]how to set Input value in formField ReactJs
i cannot able to set value to the Inputfield in Form. 我无法在Form中将值设置为Inputfield。 below is my code.
下面是我的代码。 even i tried to give direct value too like in
value='ABC'
in input element. 甚至我也尝试提供直接值,就像输入元素中的
value='ABC'
。 but no luck. 但没有运气。 when i tried to display value outside Form Tag like
当我尝试在Form Tag之外显示值时
<h1>{this.state.company.companyCode}</h1>
this shows value. 这显示了价值。 but not inside Form.
但不在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>
);
}
}
Your question seems a little hit and miss. 您的问题似乎有点偶然。 From my understanding, you are trying to set the value of the input field as the user types in. You need to use the onChange event handler with the input field.
据我了解,您正在尝试在用户键入内容时设置输入字段的值。您需要对输入字段使用onChange事件处理程序。 Also, I would suggest you to not use nested objects inside the state.
另外,我建议您不要在状态内使用嵌套对象。 Here's a simple approach
这是一个简单的方法
state = {
companyCode: ''
};
Now, Inside your render function for the input field you need to use a onChange handler: 现在,在输入字段的渲染函数中,您需要使用onChange处理程序:
<input type="text" name="companyCode" value={this.state.companyCode} onChange={this.handleChange} />
You can define the handleChange function outside the render function. 您可以在render函数之外定义handleChange函数。 Also, you can use arrow functions to avoid binding to this.
另外,您可以使用箭头功能来避免对此进行绑定。 Here's an example:
这是一个例子:
handleChange = e => {
this.setState({ companyCode: e.target.value });
}
Not sure how your Input
component is designed, but it seems that you are passing an object as the value
. 不确定
Input
组件的设计方式,但似乎您要传递一个对象作为value
。
You set companyCode
as an object: 您将
companyCode
设置为对象:
companycode: { value: ''}
So you should use it like this: 因此,您应该像这样使用它:
value={this.state.company.companyCode.value}
Two-way binding getFieldDecorator
from antd
will not work for nested state ( company.companyCode
). antd
的双向绑定getFieldDecorator
antd
用于嵌套状态( company.companyCode
)。 You can find documentation on https://ant.design/components/form/#Form.create(options) 您可以在https://ant.design/components/form/#Form.create(options)上找到文档
Try assigning and using companyCode
with setFieldsValue
. 尝试分配和使用
companyCode
与setFieldsValue
。
setFieldsValue({
companyCode: response.companyCode,
});
Example: https://codesandbox.io/s/romantic-dubinsky-ln4yu?fontsize=14 示例: https : //codesandbox.io/s/romantic-dubinsky-ln4yu?fontsize = 14
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.