2017-12-27 13 views
1

イベント時に特定のフィールドの値を変更する方法を教えてください。働いていないredux-form:クリック時に特定のフィールド値を変更する

(未定義のプロパティ 'FIRSTNAME' を読むことができません)

onclick1() { 
    this.props.fields.firstname.onChange("John") 
} 
render() { 
const { handleSubmit } = this.props; 
return (
    <div> 
    <form onSubmit={handleSubmit(this.submit.bind(this))}> 

     <Field 
     name="firstname" 
     component={TextField} 
     label="first name" 
     /> 
     <button onClick="this.onclick1()">Set name to John</button> 

     <button type="submit"> 
     okay 
     </button> 
    </form> 

このソリューションは、ここで提案されたが、それは私 https://stackoverflow.com/a/36916183/160059

Reduxの形式のV7

のために働いていません
+0

あなたのフォームはどのように見えますか?いくつかのコードを共有しますか? – Dario

+0

@Dario更新例 – rendom

答えて

1

コードにいくつかの問題があります。

<button onClick="this.onclick1()"> 

<button onClick={this.onclick1}> 

とonclick1は何とかコンポーネントにバインドする必要があります。

はする必要があります。また、フィールド値を設定するには、通常、changeメソッドを使用します。だから私のような何かにあなたのコードを変更します:私はあなたのコードのいくつかの関連部分を書き直し

class ComplexForm extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.onclick1 = this.onclick1.bind(this); 
    } 

    onclick1() { 
    this.props.change("firstname", "John"); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <form onSubmit={handleSubmit}> 
     <Field name="firstname" component="input" label="first name" /> 
     <button onClick={this.onclick1}>Set name to John</button> 
     </form> 
    ); 
    } 
} 

注意し、私は私はあなたのTextFieldがどのように見えるかわからない標準inputコンポーネントの原因を使用しています。オンラインデモを確認here

+0

大きな感謝は働いています。 – rendom

関連する問題