Reactjs 组件中handleInputChange的表单错误

我正在使用map在一组对象上循环。我正在使用此数据填充表单，但是我在使用

handleInputChange

函数时遇到了问题。使用组件时如何启动

handleInputChange

。我得到的错误是this.setState不是handleInputChange的函数

路径：

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

返回(


);
CareerHistoryPositionsUpdateForm.propTypes={
公司名称：PropTypes.string，
标题：PropTypes.string，
controlFunc:PropTypes.string
};

路径：`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>
  );
}

handleInputChange（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
渲染位置（）{
const profileCandidateCollection=this.props.profileCandidate；
常量careerHistoryPositions=profileCandidateCollection&&profileCandidateCollection.careerHistoryPositions；
if（careerHistoryPositions）{
return careerHistoryPositions.map（（位置）=>{
返回(
)
})
}
}
render（）{
返回(

试验

{this.renderPositions（）}

);
}

您需要

处理组件实例的InputChange

，以便在调用该组件时，函数内部引用预期对象：

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

---

如果您正在使用（或使用为您配置必要的Babel插件的工具，例如），您可以在定义函数时使用此绑定函数：

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

---

嗯，我得到了这个错误

您在没有“onChange”处理程序的情况下为表单字段提供了一个“value”属性。这将呈现只读字段。如果字段应该是可变的，请使用“defaultValue”。否则，请设置“onChange”或“readOnly”。请检查“FormControl”的渲染方法。

抱歉，我不确定更改了什么，但错误已消失。现在我无法输入字段，控制台中也没有错误。您正在为输入提供值，但没有为该输入提供onChange处理程序。这就是react发出警告的原因。根据这个警告，输入类型在FormControl组件中。感谢Ritesh，如果我

console.log（this.state）

在

handleInputChange

的末尾，我可以看到它在添加最后一个字母时发生了变化。它只允许1个字符。可能重复