Question

我是新的反应世界，我无法从表单输入字段正确地改变状态。我正在构建一个将保存在数据库中的员工配置文件。我在组件状态下创建了一个配置文件，并从输入字段获取用户数据。但是，在OnChange事件处理功能中，工资和标题字段不会改变。候选人是员工的对象代表

this.state = {
  candidate: {
    account: {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
    },
    salary: '',
    headline: '',
    topSkills: [{
        experience1: '',
        title1: ''
      }, {
        experience2: '',
        title2: ''
      }, {
        experience3: '',
        title3: ''
      },
    ],
  }
}

onChangefunction

handleChange(e) {
  const name = e.target.name;
  const value = e.target.value;
  let copyState = Object.assign({},
    this.state.candidate);
  copyState.account[name] = value;
  copyState.topSkills[name] = value;
  copyState.salary = value;
  copyState.headline = value;
  this.setState(copyState);
}

薪水和标题中的输入字段不接受来自用户的输入

<input
  name="salary"
  type="number"
  value={this.state.candidate.salary|| ''}
  onChange={this.handleChange}
/>

任何人都可以向我提供帮助并建议如何在onChange函数上构造setState吗？

Answer 1

您可以简单地处理输入的更改：

library(pdp)
library(ggplot2)

pima=na.omit(pima)
head(pima)

lin1=lm(triceps~pregnant, data=pima)
coef=coef(lin1)

#plot1
p1=ggplot(data = pima, aes(pima$pregnant, pima$triceps))+
  geom_point()+
  geom_abline(col="blue",intercept = coef[1], slope = coef[2], size=1)+
  labs(title="Linear Regression", x="Pregnant", y="Triceps")+
  theme(plot.title = element_text(hjust = 0.5))

lin2=lm(triceps~glucose, data=pima)
coef=coef(lin2)

#plot2
p2=ggplot(data = pima, aes(pima$glucose, pima$triceps))+
  geom_point()+
  geom_abline(col="blue",intercept = coef[1], slope = coef[2], size=1)+
  labs(title="Linear Regression", x="Glucose", y="Triceps")+
  theme(plot.title = element_text(hjust = 0.5))

lin3=lm(triceps~pressure, data=pima)
coef=coef(lin3)

#plot3
p3=ggplot(data = pima, aes(pima$pressure, pima$triceps))+
  geom_point()+
  geom_abline(col="blue",intercept = coef[1], slope = coef[2], size=1)+
  labs(title="Linear Regression", x="Pressure", y="Triceps")+
  theme(plot.title = element_text(hjust = 0.5))

grid.arrange(p1, p2, p3, ncol=2)

Answer 2

SetState不需要整个对象，只需要在状态中更新。

根据你已经拥有的东西，你可以这样做

handleChange(e) {
 const name = e.target.name;
 const value = e.target.value;


 this.setState({
   account[name]: value, 
   topSkills[name]: value, 
   salary: value,
   headline: value, 
 });
}

虽然看看你的实施情况，但我不确定你会在这里实现你想要的......看起来如果你更新了薪水，你account[name]，topSkills[name]和＆＃ 39;标题`将更新为您为薪水输入的值。

正如devserkan所提到的，您可以使用setState

一次更新一个字段

所以你能做的就是......

<input
 name="salary"
 type="number"
 value={this.state.candidate.salary|| ''}
 onChange={(e)=>this.setState({ salary: e.currentTarget.value })}/>

这样效率稍低，因为它会在每个渲染上重新创建onChange函数。在这种情况下，您在渲染之外创建函数的方法更好......

handleSalaryChange { (e)=>this.setState({ salaray: e.currentTarget.value }); }

handleHeadlineChange { (e)=>this.setState({ headline: e.currentTarget.value }); }

render{ return (
  <div>
    <input
     name="salary"
     type="number"
     value={this.state.candidate.salary|| ''}
     onChange={this.handleSalaryChange)}/>
    <input
     name="headline"
     value={this.state.candidate.headline|| ''}
     onChange={this.handleHeadlineChange)}/>
    ...
  </div>
)}

更新要使handle*Change函数正常工作，需要更新state以删除candidate包装.... / p>

 state = {
    account: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '', 
    },
    salary: '',
    headline: '', 
    topSkills: [ 
    {
        experience1: '', 
        title1: ''
    }, 
    {
        experience2: '', 
        title2: ''
    },
    {
        experience3: '', 
        title3: ''
    },
   ],
 }

Answer 3

归功于udemy academy MLR - 助教。他这样解决了，答案解决了问题。

handleChange = e => {
            const candidateClone = Object.assign({}, this.state.candidate);// Shallow clone.
            const accountClone = Object.assign({}, this.state.candidate.account);// Deep clone.
            const topSkillsClone = Object.assign({}, this.state.candidate.topSkills);// Deep clone.
            // below (let): Persists the last entered value (required).
            let myHeadline = candidateClone.headline;
            let myFirstName = candidateClone.account.firstName;
            let mySalary = candidateClone.salary;
            let myTopSkillsTitle = candidateClone.topSkills[0].title;
            switch (e.target.name) {
                case "headlineInput": // name in input field
                    myHeadline = e.target.value;
                    break;
                case "firstNameInput": // name in input field
                    myFirstName = e.target.value;
                    break;
                case "salaryInput":
                    mySalary = e.target.value;
                    break;
                case "topSkillsTitleInput": // name in input field 
                    myTopSkillsTitle = e.target.value;
                    break;
                default:
                    console.log("Switch statement error");
            }
            accountClone.firstName = myFirstName;// Place the property value inside the deep cloned embedded object.
            topSkillsClone[0].title = myTopSkillsTitle;// Place the property value inside the deep cloned embedded array.
            candidateClone["account"] = accountClone;// Place the deep cloned embedded object inside the shallow cloned main object.
            candidateClone["salary"] = mySalary;// Place the property inside the shallow cloned main object.
            candidateClone["headline"] = myHeadline;// Place the property inside the shallow cloned main object.
            candidateClone["topSkills"] = topSkillsClone;// Place the deep cloned embedded array inside the shallow cloned main object.
            this.setState({candidate:candidateClone});
        };

Reactjs从表单输入中设置StateState问题

3 个答案: