FormItem ANTD中defaultValue或value無效的問題
P粉265724930
P粉265724930 2023-08-22 23:51:25
0
2
453
<p>我尝试使用以下代码,但字段没有绑定。onChange属性运行良好</p> <pre class="brush:php;toolbar:false;">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></pre> <p>我有什么遗漏吗?我甚至使用了<code>input</code>而不是<code>Input</code></p> <p><strong>编辑</strong> 在<code>componentDidMount</code>方法中,我从API获取数据:</p> <pre class="brush:php;toolbar:false;">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 } }) })</pre> <p>我尝试使用<code>initialValue</code>,但只有在<code>constructor</code>方法中设置状态值时才有效。调用API时,更改不会反映出来。</p>
P粉265724930
P粉265724930

全部回覆(2)
P粉940538947

你也可以使用鉤子

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>
P粉078945182

文檔中指出:

當資料從後端載入時,只需呼叫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)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!