Question

我需要从子组件更新我的顶级状态。子组件有多个用于此目的的选择列表。

在我的孩子组件中：

constructor(props) {
  this.updateNoOfSets = this.updateNoOfSets.bind(this);
  this.updateNoOfRounds = this.updateNoOfRounds.bind(this);
}

updateNoOfSets() {
  this.props.updateNoOfSets(parseInt(this.updatedNoOfSets.value));
}

updateNoOfRounds() {
  this.props.updateNoOfRounds(parseInt(this.updatedNoOfRounds.value));
}

<select
  value={this.props.noOfSets}
  onChange={this.updateNoOfSets}
  ref={(input) => {
    this.updatedNoOfSets = input;
  }}
>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select
  value={this.props.noOfRounds}
  onChange={this.updateNoOfRounds}
  ref={(input) => {
    this.updatedNoOfRounds = input;
  }}
>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

在我的父母：

constructor(props) {
  super(props);
  this.updateNoOfSets = this.updateNoOfSets.bind(this);
  this.updateNoOfRounds = this.updateNoOfRounds.bind(this);
}

updateNoOfSets(noOfSets) {
  this.setState({'noOfSets': noOfSets});
}

updateNoOfRounds(noOfRounds) {
  this.setState({'noOfRounds': noOfRounds});
}

这是有效的，但对我来说似乎很啰嗦。是否有更短的写作方式？我的代码示例只有2个选择列表，但我的实际应用程序更多。

Answer 1

您不需要为每个选择元素添加多个处理程序。您所需要的只是一个足够智能的单一处理程序

子：

constructor(props) {
  this.updateValue = this.updateValue.bind(this);
}

updateValue(item, value) {
  this.props.updateValue(item, parseInt(value));
}

<select
  value={this.props.noOfSets}
  onChange={(e) => this.updateValue('noOfSets', e.target.value)}
>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select
  value={this.props.noOfRounds}
  onChange={(e) => this.updateValue('noOfRounds', e.target.value)}
>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

父：

constructor(props) {
  super(props);
  this.updateValue = this.updateValue.bind(this);
}

updateValue(item, value) {
  this.setState({[item]: value});
}

编辑：请记住binding方法中的render函数不是一个好主意，因为每次渲染执行时都会返回一个新函数，看一看在 how to avoid binding in render method

的答案中

React中用于多个输入元素的单个处理程序

1 个答案: