我尝试使用以下代码,但字段没有绑定。onChange属性运行良好
const { getFieldDecorator, getFieldError, isFieldTouched } = this.props.form;
const NameError = isFieldTouched("Name") && getFieldError("Name");
<FormItem validateStatus={NameError ? "error" : ""} help={NameError || ""}>
{getFieldDecorator("Name", {
//initialValue: this.state.Data.Name,
rules: [{ required: true, message: "Please input the component name!" }]
})(
<Input
className="form-control"
type="text"
name="Name"
defaultValue={this.state.Data.Name}
onChange={this.onChange}
/>
)}
</FormItem>
我有什么遗漏吗?我甚至使用了input而不是Input
编辑 在componentDidMount方法中,我从API获取数据:
fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
.then(results=>{
return results.json()
})
.then(data=>{
this.setState({
Data: {
Id: data.field.Id,
Name: data.field.Name,
Description: data.field.Description,
Value: data.field.Value
}
})
})
我尝试使用initialValue,但只有在constructor方法中设置状态值时才有效。调用API时,更改不会反映出来。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你也可以使用钩子
import { Form } from "antd" const [form] = Form.useForm(); fetch('api') .then(results=>{ return results.json() }) .then(data=>{ form.setFieldsValue({ sample: data.dataYouWant }); <Form form = {form}> <Form.Item name = "sample"> <Input /> </Form.Item> </Form>文档中指出:
当数据从后端加载时,只需调用
setFieldsValue:fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id) .then(results=>{ return results.json() }) .then(data=>{ this.props.form.setFieldsValue({ Id: data.field.Id, Name: data.field.Name, Description: data.field.Description, Value: data.field.Value }) })或者更简洁地,如果后端的
data.field完全匹配字段名: