web-dev-qa-db-ja.com

<input>タグのプロパティ `value`の値が無効です

解決できないという警告が表示されます。

タグのprop valueの値が無効です。要素から削除するか、文字列または数値を渡してDOMに保持します。詳細については

以下は私が使用しているコードです：

<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>

TypeScriptインターフェイスは次のようになります。

export interface IFieldEdition{
    Data:IFieldData
}

export interface IFieldData{
    Id?:number,
    Name?:string,
    Value?:string,
    Description?:string,
    CreatedDate?:Date,
    CreatedBy?:string,
    StatusId?: number
}

どうすればこれを解決できますか？どんな手掛かり？

reactjsantd
3
Flezcano

Antdフォームを使用しているようです。 Antdフォームから 公式ドキュメント ：

GetFieldDecoratorによってラップされた後、value（またはvaluePropNameによって定義されたその他のプロパティ）onChange（またはトリガーによって定義されたその他のプロパティ）プロップがフォームコントロールに追加され、フォームデータのフローはFormによって処理されます。

SetStateを手動で呼び出さないでください。プログラムで値を変更するには、this.props.form.setFieldsValueを使用してください。

SetStateを呼び出すinitialValue: (()=>{this.state.Data.Name}の使用が、このエラーが発生する理由である可能性があります。

5
Harvey

getFieldDecoratorがどのように機能するかはわかりませんが、initialValueプロップとして関数を渡していることが問題であると思われます。

initialValue: (()=>{this.state.Data.Name})をinitialValue: this.state.Data.Nameに置き換えてみてください

2
rubentd

入力でフォームを作成しているときにこのエラーが発生しました。私の場合、解決策は非常に簡単でした。

<input 
    type="text" 
    value={this.state.term} 
    onChange={(e) => this.setState({ term: e.target.value.toLocaleUpperCase() })}
/>

何が起こったかというと、単にメソッドを呼び出すのを忘れて、次のようにしたのです。

toLocaleUpperCase

したがって、関数呼び出しの最後にある括弧を忘れないでください。お役に立てれば。

0
Mirza Sisic