无法在React中键入InputType“text”

时间:2017-04-02 15:03:37

标签: javascript node.js reactjs redux

我正在使用NodeJS。

这是我在coursePage.js中的我的组件。我的问题是,当我运行它时,我无法输入我的InputType,虽然我在代码中看不到任何错误(控制台都没有显示任何内容)。

import React , {PropTypes} from 'react';
import {connect} from 'react-redux';
import * as courseActions from '../../actions/courseActions';

class coursesPage extends React.Component{

  constructor(props, context) {
    super(props, context);

    this.state = {
      course: {title: ""}
    };

    this.onTitleChange= this.onTitleChange.bind(this);
    this.onClickSave= this.onClickSave.bind(this);
  }

  onTitleChange(event){
    const course = this.state.course;
    course.title = event.target.value;
    this.setState=({course: course});
  }

  onClickSave(){
    this.props.dispatch(courseActions.createCourse(this.state.course));
  }
  courseRow(course,index){
    return <div key = {index}>{course.title}</div>;
  }

  render(){
    return(
      <div>
        <h1>Courses</h1>
        {this.props.courses.map(this.courseRow)}
        <h2>Add Course</h2>
        <input
          type="text"
          onChange={this.onTitleChange}
          value={this.state.course.title}/>

        <input
          type="submit"
          value="Save"
          onClick={this.onClickSave}/>
      </div>
    );
  }
}
coursesPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  courses: PropTypes.array.isRequired
};

function mapStateToProps(state, ownProps){
  return{
    courses : state.courses
  };

}
export default connect(mapStateToProps)(coursesPage);

2 个答案:

答案 0 :(得分:1)

这个setState就像一个函数,所以你使用&#39; =&#39;也许是错的。

答案 1 :(得分:0)

问题是,您正在以错误的方式更新state值,请尝试以下操作:

const course = this.state.course;
course.title = event.target.value;
this.setState({course});

要更新state值,我们需要在object中传递setState,而不是分配object;