Tengo un estado llamado workExp (un objeto) que tiene 6 atributos. Tengo un formulario que tiene 6 campos y quiero guardar los valores de campo en los atributos de mi estado workExp. Lo que no puedo entender es cómo se verá mi onchange para cada campo de entrada.
Mi estado:
export default class Resume extends Component { constructor() { super(); this.state = { step: 1, firstName: '', lastName: '', email: '', phone: '', address: '', linkedIn: '', workExp: { //this is the state I am concerned with jobTitle: '', city: '', employer: '', startDate:'', endDate: '', responsibilities: '', id: '' }, workExpData: [], } }Este es mi formulario:
<form> <input type="text" className="form-control" id="jobtitle" aria-describedby="emailHelp" value= {values.workExp.jobTitle}/> <input type="text" className="form-control" id="city" aria-describedby="emailHelp" value= {values.workExp.city}}/> <input type="text" className="form-control" id="employer" value={values.workExp.employer} /> <input type="text" className="form-control" id="startdate" value={values.workExp.startDate} /> <input type="text" className="form-control" id="enddate" value={values.workExp.endDate}/> <textarea className="form-control" id="r&r" rows="3" value={values.workExp.responsibilities}></textarea> </form>Soy bastante nuevo para reaccionar, por lo que cualquier ayuda sería muy apreciada. ¡Salud!
Use el operador de propagación y anule la propiedad según sea necesario:
function onChangeWorkExpXXX(e) { this.setState({ workExp: { ...workExp, XXX: e.target.value, }, }); } Donde XXX podría ser algo como el empleador o la fecha de finalización.
export default class Resume extends Component { constructor() { super(); this.state = { step: 1, firstName: '', lastName: '', email: '', phone: '', address: '', linkedIn: '', workExp: { //this is the state I am concerned with jobTitle: '', city: '', employer: '', startDate:'', endDate: '', responsibilities: '', id: '' }, workExpData: [], } } <form> <input type="text" className="form-control" id="jobtitle" aria-describedby="emailHelp" value= {values.workExp.jobTitle} onChange={e=>{ let temp = {...this.state} temp.workExp.jobTitle = e.target.value ; this.setState({...temp}) }} /> <input type="text" className="form-control" id="city" aria-describedby="emailHelp" value= {values.workExp.city}} onChange={e=>{ let temp = {...this.state} temp.workExp.city = e.target.value ; this.setState({...temp}) }} /> <input type="text" className="form-control" id="employer" value={values.workExp.employer} onChange={e=>{ let temp = {...this.state} temp.workExp.employer = e.target.value ; this.setState({...temp}) }} /> <input type="text" className="form-control" id="startdate" value={values.workExp.startDate} onChange={e=>{ let temp = {...this.state} temp.workExp.startDate = e.target.value ; this.setState({...temp}) }} /> <input type="text" className="form-control" id="enddate" value={values.workExp.endDate}. onChange={e=>{ let temp = {...this.state} temp.workExp.endDate = e.target.value ; this.setState({...temp}) }} /> <textarea className="form-control" id="r&r" rows="3" value={values.workExp.responsibilities} onChange={e=>{ let temp = {...this.state} temp.workExp.responsibilities = e.target.value ; this.setState({...temp}) }} ></textarea> </form>