как установитьState из динамически созданного div

Question

Я создаю панель поиска для поиска курсов из mongodb, и после возврата курсов у меня есть кнопка для каждого класса, в которую можно записаться. Как установить идентификатор курса и идентификатор студента, которые я получаю из аутентификации в магазине приставок. Я отправляю этих двоих на сервер. Как бы я мог это сделать.

  class CourseItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      studentID: "",
      courseID: ""
    };
    this.registerClass = this.registerClass.bind(this);
    this.handleCourse = this.handleCourse.bind(this);
  }
  componentDidMount() {
    this.setState({
      studentID: this.props.auth.user.id
    });
  }
  handleCourse = e => {
    this.setState({ courseID: e.target.value });
  };
  registerClass = e => {
    var data = {
      studentID: this.state.studentID,
      courseID: this.state.courseID
    };
    console.log("from register function", data);

    axios.post("students/registerclass", data).then(res => {
      if (res.status === 200) {
        console.log(res.data);
      }
    });
  };

  render() {
    let classesResult = null;
    if (this.props.class != null) {
      classesResult = this.props.class.map(singleClass => {
        return (
          <ul className="collection with-header" key={singleClass.id}>
            <li className="collection-item">
              <div>
                <p value={singleClass.id} onChange={this.handleCourse}>
                  {singleClass.courseID}
                  {""} {singleClass.courseName}
                </p>
                <span className="secondary-content">
                  <button
                    style={btnColor}
                    onClick={this.registerClass}
                    className="btn btn-flat"
                    type="submit"
                    name="action"
                  >
                    Enroll
                  </button>
                </span>
              </div>
            </li>
          </ul>
        );
      });

Answer 1

Я думаю, вам нужно mapStateToProps(), чтобы получить состояние из хранилища и обновить локальное состояние компонента.

Выезд: https://react -redux.js.org / using-Reaction-redux / connect-mapstate

function mapStateToProps(state) {
  studentID = state.studentID
  courseID = state.courseID
}

export default connect(mapStateToProps)(CourseItem)

И затем вы можете использовать studentID и courseID в своем компоненте в качестве реквизита.

Например:

constructor(props) {
  super(props);
  this.state = {
    studentID: "",
    courseID: ""
  };
  this.registerClass = this.registerClass.bind(this);
  this.handleCourse = this.handleCourse.bind(this);
}
componentDidMount() {
  this.setState({
    studentID: this.props.auth.user.id
  });
}

// Added componentWillReceiveProps lifecycle method
componentWillReceiveProps(nextProps) {
  if (nextProps.studentID) {
    this.setState({
      studentID: nextProps.studentID
    });
  if (nextProps.courseID) {
    this.setState({
      courseID: nextProps.courseID
    });
  }
}
handleCourse = e => {
  this.setState({ courseID: e.target.value });
};
registerClass = e => {
  var data = {
    studentID: this.state.studentID,
    courseID: this.state.courseID
  };
  console.log("from register function", data);

  axios.post("students/registerclass", data).then(res => {
    if (res.status === 200) {
      console.log(res.data);
    }
  });
};

render() {
  let classesResult = null;
  if (this.props.class != null) {
    classesResult = this.props.class.map(singleClass => {
      return (
        <ul className="collection with-header" key={singleClass.id}>
          <li className="collection-item">
            <div>
              <p value={singleClass.id} onChange={this.handleCourse}>
                {singleClass.courseID}
                {""} {singleClass.courseName}
              </p>
              <span className="secondary-content">
                <button
                  style={btnColor}
                  onClick={this.registerClass}
                  className="btn btn-flat"
                  type="submit"
                  name="action"
                >
                  Enroll
                </button>
              </span>
            </div>
          </li>
        </ul>
      );
    });


  // ADDED mapStateToProps()
  const mapStateToProps = state => ({
    profileID: state.profileID,
    courseID: state.courseID
  });

  export default connect(mapStateToProps)(CourseItem)