Stateless Komponente mit gesteuerten Formelementen reagieren?

Question

Ich habe eine dumme/staatenlose Komponente, die verwendet wird, um nur ein Formular,

nur eine typische Form zu machen.

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

Ich Steuerung dieses Formular von der übergeordneten intelligenten Komponente

der gerade die obere Form Komponente Rendering durch die Über Requisiten für Werte und Event-Handler

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

alles funktioniert gut, aber Ich bekomme diese Warnung

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

kann ich diese Warnung auflösen, ohne in stateful Komponente zu konvertieren? Diese

Answer 1

ist, weil der Autor Objekt verliert entweder das firstName oder lastName Feld, wenn Sie ändern entweder einer von ihnen:

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

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

Reagieren nur, dass eine Zusammenführung auf der oberen Schicht der this.state. Da firstName und lastName in einem author Objekt verschachtelt sind, wenn Sie handlefn/lnChange tun und nur eines der Felder setzen, das andere verschwindet.

Das Update zu tun wäre:

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

Oder wenn Sie mehr als zwei Felder in Zukunft haben, wäre es einfacher, die Ausbreitung Operator verwenden für die Zusammenführung:

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

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

oder benutzen eine Dienstprogrammzusammenführungsfunktion von lodash.