时间戳

首页 > 解决方案 > 根据另一个字段值响应更改初始状态

reactjs - 根据另一个字段值响应更改初始状态

问题描述

如何根据另一个字段的输入值更改字段的初始状态值？

这是我的代码：

import React from "react";

export class someComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grade: "",
      tuition: changeStateHere
    };
  }

  render() {
    <div>
      <form onSubmit={this.someFunction.bind(this)}>
        <select name="grade" onChange={this.onChange} value={this.state.grade}>
          <option value="">Class</option>
          <option value="Grade One">Grade One</option>
          <option value="Grade Two">Grade Two</option>
          <option value="Grade Three">Grade Three</option>
          <option value="Grade Four">Grade Four</option>
          <option value="Grade Five">Grade Five</option>
          <option value="Grade Six">Grade Six</option>
        </select>
        <input
          type="text"
          name="tuition"
          placeholder="Tuition"
          value={this.state.tuition}
          onChange={this.onChange}
        />
      </form>
    </div>;
  }
}

我想根据选择字段tuition上的输入选项设置动态初始状态值。grade

例如，如果用户选择Grade One，则该tuition值应为 15000；如果Grade Two，则该值应为“20000”；等等

是否有任何解决方法动态更改初始状态值？

标签： reactjs

解决方案

您需要处理等级选择并评估event.target.value选择元素的。基于此，您可以使用切换到this.setStateTuition 以及输入字段是否被禁用。您应该使用defaultValue而不是值，以便当用户选择和选项时，它将输入设置为this.state.tuition

import React from "react";

export class someComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grade: "",
      gradeSelected: false,
      tuition: 0,
    };
  }

  handleGradeSelect = event => {
    let newState = Object.assign({}, this.state) // duplicate state so you can mutate this copy
    switch(event.target.value){ // evaluate the value of the select option
      case 'Grade One':
        newState.tuition = 15000
        case 'Grade Two':
        newState.tuition = 20000
        // You get the picture
       default:
        newState.tuition = 0 // needs to have a default if no option
    }
    newState.gradeSelected = true
    this.setState(newState)
  }

  render() {
    <div>
      <form onSubmit={this.someFunction.bind(this)}>
        <select name="grade" onChange={event => this.handleChange(event)}>
          <option disabled>Class</option>
          <option value="Grade One">Grade One</option>
          <option value="Grade Two">Grade Two</option>
          <option value="Grade Three">Grade Three</option>
          <option value="Grade Four">Grade Four</option>
          <option value="Grade Five">Grade Five</option>
          <option value="Grade Six">Grade Six</option>
        </select>
        <input
          type="text"
          name="tuition"
          placeholder="Tuition"
          value={this.state.tuition}
          onChange={this.onChange}
          disabled={!this.state.gradeSelected}
        />
      </form>
    </div>;
  }
}

推荐阅读