制御されたフォーム要素を持つ状態のないコンポーネントに反応しますか？

Question

私はフォームをレンダリングするためだけに使用されるダム/ステートレスコンポーネントを持っています。

これは単なる典型的なフォームです。

import React from 'react' 

export const AuthorForm = 
({ firstName , lastName , handlefnChange , handlelnChange}) => (
    <form action=""> 
    <h2>Manage Authors</h2> 
    <label htmlFor="firstName">First Name</label> 
    <input type="text" name="firstName" 
     value={firstName} onChange={handlefnChange} /> 
    <br/> 
    <label htmlFor="lastName">Last Name</label> 
    <input type="text" name="lastName" 
     value={lastName} onChange={handlelnChange} /> 
    <br/> 
    <input type="submit" value="save" /> 
    </form> 
) 

私はすべてが正常に動作した値とイベントハンドラの 小道具

import React , {Component} from 'react' 
import {AuthorForm} from './' 

export class ManageAuthors extends Component { 
    constructor(){ 
    super() 
    this.state = { 
     author:{ 
     id: "", 
     firstName:"", 
     lastName:"" 
     } 
    } 
    } 

    handlefnChange = e => { 
    this.setState({ 
     author:{ 
     firstName: e.target.value 
     } 
    }) 
    } 

    handlelnChange = e => { 
    this.setState({ 
     author: { 
     lastName: e.target.value 
     } 
    }) 
    } 

    render =() => (
    <div> 
    <AuthorForm 
     {...this.state.author} 
     handlefnChange={this.handlefnChange} 
     handlelnChange={this.handlelnChange} /> 
    </div> 
) 
} 

をダウン渡すだけで、上のフォームコンポーネントをレンダリングしている親のスマートコンポーネント

からこのフォームを制御していますが、私はこの警告を受けています

warning.js:36 Warning: AuthorForm is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://facebook.github.io/react/docs/forms.html#controlled-components

statefulコンポーネントに変換せずにこの警告を解決できますか？

Answer 1

あなたがそれらのいずれかを変更したときに、著者のオブジェクトはどちらかfirstNameまたはlastNameフィールド失うためです：

handlefnChange = e => { 
    this.setState({ 
     author: { 
     firstName: e.target.value 
     // lastName is missing! 
     } 
    }); 
    } 

handlelnChange = e => { 
    this.setState({ 
    author: { 
     // firstName is missing! 
     lastName: e.target.value 
    } 
    }) 
} 

はthis.stateの最上層のマージを行い反応します。 firstNameとlastNameはauthorオブジェクト内にネストされているため、handlefn/lnChangeを入力してフィールドの1つのみを設定すると、もう1つは欠落します。

修正は何をするだろう：

handlefnChange = e => { 
    this.setState({ 
     author: { 
     firstName: e.target.value, 
     lastName: this.state.author.lastName 
     } 
    }); 
    } 

handlelnChange = e => { 
    this.setState({ 
    author: { 
     firstName: this.state.author.firstName, 
     lastName: e.target.value 
    } 
    }) 
} 

それとも、将来的には以上の二つのフィールドを持っている場合、マージするスプレッド演算子を使用して容易になるだろう：

handlefnChange = e => { 
    this.setState({ 
    author: { 
     ...this.state.author, 
     firstName: e.target.value, 
    } 
    }); 
} 

handlelnChange = e => { 
    this.setState({ 
    author: { 
     ...this.state.author, 
     lastName: e.target.value 
    } 
    }) 
} 

または使用lodashのユーティリティマージ関数。