リアクションフォームが更新に集中しなくなる

Question

ジェネリック入力を使用してフォームを作成しようとしていますが、入力するたびにこの入力のフォーカスを失い、再度クリックしなければなりません。

handleChange(propertyName, event) { 
    const contact = this.state.contact; 
    contact[propertyName] = event.target.value; 
    this.setState({ contact: contact }); 
    } 


render() { 
    const FormInput = (props) => { 
     return (
      <label> 
       Name: 
       <input 
        type="text" 
        placeholder="Enter text" 
        onChange={event => this.handleChange(props.name, event)} 
        value={props.value} 
       /> 
      </label> 
     ) 
    } 

    return (
     <form> 

       <FormInput value={this.state.videoName} name="videoName" /> 
       <FormInput value={this.state.title} name="title" /> 

     </form> 
    ); 
}; 

Answer 1

は、入力の値がオンチェンジの結果と同期する必要はありませんか？

handleChange(propertyName, event) { 
    const contact = this.state.contact; 
    contact[propertyName] = event.target.value; 
    this.setState({ contact: contact }); 
} 

constructor(props) { 
    super(); 
    this.state = { 
     contact: props 
    } 
} 

render() { 
    const FormInput = (props) => { 
     return (
      <label> 
       Name: 
       <input 
        type="text" 
        placeholder="Enter text" 
        onChange={event => this.handleChange(props.name, event)} 
        value={this.state.contact.value} 
       /> 
      </label> 
     ) 
    } 

    return (
     <form> 
      <FormInput value={this.state.videoName} name="videoName" /> 
      <FormInput value={this.state.title} name="title" /> 
     </form> 
    ); 
}; 

このコードはテストされていないが、それはgetInitialStateに相当し、これを行うことができますか、あなたはそれがにダウン送信するものに更新というhandleChangeであなたの親コンポーネントにコールバックを追加することができます。

はこのことを考えます小道具