javascript - 不确定如何从子组件更新父状态

Question

我有一个具有位置状态的 CreateTesterModal 类。这个类呈现一个表单组件，它显示在这个模态类中，如下所示:CreateTesterModal -> CreateTesterForm

当用户点击 Add Location 链接时，这个包含位置表单的新模式打开CreateTesterForm -> AddLocationModal -> AddLocationForm

我的问题现在是如何根据用户将在 AddLocationForm 的子组件中输入的内容从主模态 (CreateTesterModal) 更新我的位置状态?

我是 react 的新手，我真的需要这个逻辑在不使用 redux 的情况下工作。有人可以帮忙吗？

---

创建测试模式:

constructor(props) {
    super(props);
    this.state = {
      fields: {
        location: 'No Location Selected',
      }
    };
  }

  fieldChange(field, value) {
    this.setState(update(this.state, { fields: { [field]: { $set: value } } }));
  }

  updateLocation(newLocation) {
    this.setState({
      location: newLocation
    })
  }

  render() {
    return (
      <div>
        ...
        <div className={`modal-body ${styles['proj-modal-body']}`}>
          <CreateTesterCharacteristicForm
            fields={this.state.fields}
            onChange={this.fieldChange.bind(this)}
            onValid={() => handleSubmit(this.state.fields)}
            onInvalid={() => console.log('Error!')}
            updateLocation={this.updateLocation.bind(this)}
          />
        </div>
        ...
      </div>
    );
  }

创建测试器表单:

<form>
    <div id={styles.locationField} className={`form-group ${styles.formGroup} ${styles.projName}`}>
              <label htmlFor="inputEmail3" className="col-sm-2 control-label">Location:</label>
              <div className="location">
                <label className="radio-inline">
                  &nbsp;
                  <Link to="#" data-toggle="modal" data-target="#addLocationModal">Add Locations</Link>
                </label>
              </div>
            </div>
    </form>
    <button
            className={`btn btn-primary text-white ${styles.saveBtn}`}
            onClick={e => {
              e.preventDefault();
              this.props.$submit(onValid, onInvalid);
            }}
          >
            Save
          </button>
<AddLocationModal />

添加位置模式:

render() {
    return (
      <div id="newLocationModal">
        <AddLocationForm />
      </div>
    );
  }

AddLocationForm:

constructor(props) {
    super(props);
    this.state = {
      locations: [],
    };
  }
render() {
  return (
    <form id="modalForm" className="form-horizontal">
      <input
        type="text"
        class="form-control"
        id="location"
      />
      <div className={`modal-footer ${styles.modalFooter}`}>
        <button className={`btn btn-primary text-white ${styles.saveBtn}`}>
          Add More
        </button>
        <button
          type="button"
          className={`btn btn-default ${styles.cancelBtn}`}
          data-dismiss="modal"
        >
          Finish
        </button>
      </div>
    </form>
  );
}

Answer 1

基本上，您可以通过将处理程序从父级传递给子级来实现

Attention : Here the handler works fine with this because it has been defined as an arrow function. If using the class method syntax, don't forget to bind the this of the class to the method or this will reference the DOM element triggering the event (in this case, the button)

class Parent extends Component {
  state = { location: null }

  updateLocation = location => {
    this.setState({ location })
  }

  render () {
    return <div><Child updateLocation={this.updateLocation} /></div>
  }
}

// Get the updateLocation function as a prop in your child component
const Child = props => {
  const { updateLocation } = props

  return <button onClick={() => updateLocation('someLocation')}>Some Location</button>
}