Question

基本上我想在选中或选中时将一个类名添加到一个无线电切换按钮。我已经完成了下面的工作，但似乎我基本上写了两次相同的东西。是否有更短/更清晰的方法来编写具有相同功能的组件？

import React from 'react';
import classnames from 'classnames';

class RadioToggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'yes',
      value2: 'no',
      isNo: false,
      isYes: false,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClick2 = this.handleClick2.bind(this);
  }

  handleClick(e) {
    this.setState({
      value: e.target.value,
      isYes: true,
      isNo: false
    });
  }

  handleClick2(e) {
    this.setState({
      value2: e.target.value2,
      isNo: true,
      isYes: false
    });
  }

  render() {
    let classes = classnames('radioButton', {active: this.state.value && this.state.isYes == true ? 'selected' : null});
    let classes2 = classnames('radioButton', {active: !this.state.value2 && this.state.isNo == true ? 'selected' : null})
    return (
      <div>
        <input className={classes} type="radio" name="yesno" value={this.state.value} onChange={this.handleClick}/>Yes
        <input className={classes2} type="radio" name="yesno" value={this.state.value2} onChange={this.handleClick2}/>No
      </div>
        );
  }
}

export default RadioToggle;

Answer 1

我会尝试类似下面的内容。目标是使用单个值，您可以从中确定每个输入的可靠性。

实际上，您使用两个无线电字段来保存布尔值。

在继续构建此组件时需要考虑几个问题：

是否始终需要值？它总是true还是false？或者它可以是空白/ undefined？

您可以使用复选框吗？复选框更适合此类true或false上下文。

import React from 'react';
import classnames from 'classnames';

class RadioToggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: undefined
    };
  }

  handleClick(e, value) {
    this.setState({
      value: value
    });
  }

  render() {
    return (
      <div>
        <input
          className={classnames('radioButton', {active: this.state.value === true})}
          type="radio"
          name="yesno"
          value={this.state.value === true}
          onChange={this.handleClick.bind(this, true)}
        />
        Yes

        <input
          className={classnames('radioButton', {active: this.state.value === false})}
          type="radio"
          name="yesno"
          value={this.state.value === false}
          onChange={this.handleClick.bind(this, false)}
        />
        No
      </div>
        );
  }
}

是否有更简洁的方法在ReactJS中编写此无线电切换组件

1 个答案: