我尝试使用以下代码,但该字段从未绑定。 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时,更改不会反映出来。
答案 0 :(得分:1)
您无法通过值 defaultValue 属性设置形式为 control 的值,而应在getFieldDecorator 中使用 initialValue设置默认值。>
您不应该手动调用setState,请使用this.props.form.setFieldsValue 以编程方式更改值。
因此,您仅需要在从后端加载数据时调用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
与字段名称完全匹配:
this.props.form.setFieldsValue(data.field)
答案 1 :(得分:1)
你也可以使用钩子
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>
答案 2 :(得分:0)
对于类组件V4:
class Demo extends React.Component {
formRef = React.createRef();
componentDidMount() {
this.formRef.current.setFieldsValue({
username: 'Bamboo',
});
}
render() {
return (
<Form ref={this.formRef}>
<Form.Item name="username" rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form>
);
}
}