Question

所以我在向服务器提交最终状态对象之前尝试创建一些本地状态更改。我首先将用户设置为targetUser，将其提交到redux存储，并且返回的具有新角色的更新用户保持在本地状态。一旦用户成为目标用户，我希望可以看到GradeSelect下拉列表，以便可以对目标用户进行评分。选择成绩后，我目前正尝试将其作为GradeSelect组件提交按钮上的数据ID抓取，并将其添加到本地状态对象。从那里我可以将新用户信息（目标用户和等级）提交给服务器。

我认为通过onSelect函数设置局部变量（由＆＃39; let＆＃39;初始化）会很容易。看起来像这样：

const GradeSelect = (props) => {
const { grades, userGrade, handleGradeChange } = props;
let newGrade = ''
const setGrade = (e) => newGrade = e.target.value;
return (
  <div>
  <select defaultValue={userGrade ? userGrade : "select"} onChange=
  {setGrade}>
    <option value="select" disabled>Select Grade</option>
    {
      grades.map(grade =>
        <option value={grade} key={grade}>{grade}</option>
      )
    }
  </select>
  <Button
    bsSize="xsmall"
    bsStyle="success"
    disabled={!newGrade.length}
    id={newGrade}
    onClick={handleGradeChange}>
      submit
  </Button>
  </div>
  );
};

export default GradeSelect;

handleGradeChange就是这个，直到我弄清楚为什么newGrade没有设置：

 handleGradeChange(e) {
  const grade = e.target.dataset.id
  console.log('NEW GRADE', grade)
}

GradeSelect包含在此周边代码中，其中包含以下选项：let options = [＆＃34; user＆＃34;，＆＃34; targetUser＆＃34;];

<td>
  <select
    onChange={handleRoleChange}
    data-id={JSON.stringify(user)}
    value={role}
   >
  <option value={role}>{role}</option>
     {
       role === options[0] ?
       <option value={options[1]}>{options[1]}</option> :
       <option value={options[0]}>{options[0]}</option>
     }
       </select>
     {
       role === options[1] ?
      <GradeSelect 
        grades={grades} 
        handleGradeChange={handleGradeChange} 
        userGrade={userGrade} 
       /> : null
      }
     </td>

在我的研究中，我认为这可能是“这个＆＃39;但是这个＆＃39;在GradeSelect中是未定义的，它是更大组件的一部分......我认为我的问题可能存在，但它超出了我的范围。

以下是我所制作的代码示例（https://codepen.io/anon/pen/MrWXMo?editors=1111）。我必须在本地创建所有导入的道具。我希望这不会影响答案。但是，codePen中的问题仍然存在。

这是我关于stackOverflow的第一个问题所以请原谅我（并随意指出）我遗漏了什么。

提前感谢您的时间

Answer 1

这是一个使用组件本地状态的简单示例。

const grades = ['Nothing', 'A', 'B', 'C', 'D', 'E', 'F'];

class GradeSelect extends React.Component {
  state = {
    selected: 'Nothing'
  };

  onChange = (e) => {
    this.setState({selected: e.target.value});
  }

  onClick = (e) => {
    console.log(`onClick selected was ${this.state.selected}`);
  }

  render() {
    return (
      <div>
        <select value={this.state.selected} onChange={this.onChange}>
        {
          grades.map(g => <option key={g}>{g}</option>)
        }
        </select>
        <button
          onClick={this.onClick}
          disabled={this.state.selected === 'Nothing'}
        >
          submit
        </button>
      </div>
    );
  };
}

一个包含几个通信组件的示例。

const grades = ['Nothing', 'A', 'B', 'C', 'D', 'F'];

class GradeSelect extends React.PureComponent {
  static defaultProps = {
    onChange: () => {},
    value: 'Nothing',
    grades: []
  }

  onChange = (e) => {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <select value={this.props.value} onChange={this.onChange}>
        {this.props.grades.map(g => <option key={g}>{g}</option>)}
      </select>
    );
  };
}

class GradeDashboard extends React.Component {
  state = {
    gradeA: 'Nothing',
    gradeB: 'Nothing'
  }

  onClick = (e) => {
    console.log(`onClick selected was ${this.state.gradeA} and ${this.state.gradeB}`);
  }

  onGradeAChange = (grade) => {
    this.setState({gradeA: grade});
  }

  onGradeBChange = (grade) => {
    this.setState({gradeB: grade});
  }

  anyUnselected = () => {
    return this.state.gradeA === 'Nothing' ||
           this.state.gradeB === 'Nothing';
  }

  render() {
    return (
      <div>
        <GradeSelect grades={grades} value={this.state.gradeA} onChange={this.onGradeAChange} />
        <GradeSelect grades={grades} value={this.state.gradeB} onChange={this.onGradeBChange}/>
        <button
          onClick={this.onClick}
          disabled={this.anyUnselected()}
        >
          submit
        </button>
      </div>
    );
  }
}

使用onSelect事件设置局部变量

1 个答案: