Question

根据以下代码，我试图绑定函数的输入

    class ProfessionalLearningAction extends Component {
        constructor(props) {
            super(props);

            this.handleChange = this.handleChange.bind(this);
            this.ensureDataFetched();
          }

     handleChange(e) {
        let change = {}
        change[e.target.name] = e.target.value
        this.setState(change)
      }

render() {
    return (
      <div className="container">
        <h1>Edit/Add Professional Learning</h1>
        <p>This component demonstrates Add/Edit data from the server and working with URL parameters.</p>
        <br /><br />
        {renderProfessionalLearningTable(this.props)}
      </div>
    );
  }

    }

function renderProfessionalLearningTable(props) {
  return (
    <form className="container">
      <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={ props.handleChange } 
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
      </div >
    </form >
  );
}

继续获取错误

Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

由于我从错误消息中知道需要定义handlechange事件。我尝试了以下代码

<input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={this.handleChange} 
            aria-describedby="Course Name" placeholder="Enter a course name" />

因为我知道这是一个在类外部的函数调用。如何解决此错误？

Answer 1

这是因为您没有传递onchange道具。并且确保无论何时制作组件，都应以大写字母（ReactJS component names must begin with capital letters?）开头。

class ProfessionalLearningAction extends Component {
        constructor(props) {
            super(props);

            this.handleChange = this.handleChange.bind(this);
            this.ensureDataFetched();
          }

     handleChange(e) {
        let change = {}
        change[e.target.name] = e.target.value
        this.setState(change)
      }

render() {
    return (
      <div className="container">
        <h1>Edit/Add Professional Learning</h1>
        <p>This component demonstrates Add/Edit data from the server and working with URL parameters.</p>
        <br /><br />
       <RenderProfessionalLearningTable {...this.props} handleChange={this.handleChange}/> //Pass the handlechange component
      </div>
    );
  }

    }

function RenderProfessionalLearningTable(props) {
  return (
    <form className="container">
      <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={ props.handleChange } 
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
      </div >
    </form >
  );
}

从外部函数中渲染表单输入绑定

1 个答案: