Erreurs de formulaire avec handleInputChange dans le composant

Question

J'utilise map pour effectuer une boucle sur un tableau d'objets. J'utilise ces données pour remplir un formulaire mais j'ai des problèmes avec la fonction handleInputChange. Comment initier handleInputChange lorsque j'utilise un composant. L'erreur que je reçois est this.setState is not a function at handleInputChange

Chemin: formComponent.jsx

return (
     <li> 
     <SingleInput 
      inputType={'text'} 
      title={'Company name'} 
      name={'position.company'} 
      controlFunc={this.props.handleInputChange} 
      content={this.props.company} 
      placeholder={'Company name'} 
      bsSize={null} 
     /> 

     </li> 
    ); 

CareerHistoryPositionsUpdateForm.propTypes = { 
    company: PropTypes.string, 
    title: PropTypes.string, 
    controlFunc: PropTypes.string 
}; 

chemin: `form.jsx »

handleInputChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
    [name]: value 
    }); 
} 

renderPositions() { 
    const profileCandidateCollection = this.props.profileCandidate; 
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions; 
    if (careerHistoryPositions) { 
    return careerHistoryPositions.map((position) => { 

     return (
     <CareerHistoryPositionsUpdateForm 
      key={position.uniqueId} 
      company={position.company} 
      controlFunc={this.handleInputChange} 
     /> 
    ) 
    }) 
    } 
} 

render() { 
    return (
    <form className="careerHistoryForm" onSubmit={this.handleFormSubmit}> 
     <ul> 
     <p>Test</p> 
     {this.renderPositions()} 
     </ul> 

     <input type="submit" className="btn btn-primary" value="Save" /> 
    </form> 
); 
} 

Answer 1

Vous devez bindhandleInputChange à l'instance du composant afin this dans la fonction référence l'objet attendu quand il s'appelle:

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    this.handleInputChange = this.handleInputChange.bind(this) 
    } 
} 

---

Si vous utilisez babel-preset-stage-2 (ou à l'aide d'outillage qui configure le nécessaire plug-in Babel pour vous, comme create-react-app), vous pouvez utiliser cette slightly nicer syntax pour lier la fonction lorsque vous définir:

class YourComponent extends React.Component { 
    handleInputChange = (event) => { 
    // ... 
    } 
}