Question

我有一个带有单选按钮的表格。这是浏览器中的React加载项解释的屏幕。

我想知道为什么值value为空，为什么没有onChange函数会改变状态。在状态下，当我单击按钮时有变量checked: false，状态应该改变，这将导致按钮样式的改变。

这是我负责创建单选按钮的组件。在这里，它从创建表单的组件传递道具。并且在此组件中，还应让状态负责checked。

class RadioButton extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    const { checked } = this.state;
    this.setState({
      checked: !checked,
    });
  }

  render() {
    const {
      value,
      backgroundColor,
      backgroundColorChecked,
      borderColor,
      height,
      width,
      ...otherProps
    } = this.props;
    const { checked } = this.state;
    return (
      <InputGroup>
        <Input
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          className="Test__questions-radio"
          {...otherProps}
        />
      </InputGroup>
    );
  }
}



RadioButton.propTypes = {
  backgroundColor: PropTypes.string,
  value: PropTypes.string.isRequired,
  borderColor: PropTypes.string.isRequired,
  height: PropTypes.string.isRequired,
  width: PropTypes.string.isRequired,
};

RadioButton.defaultProps = {
  backgroundColor: '',
};

此组件传递给

const QuestionsAnswerForm = ({
  onSubmit,
  initialValues,
}) => (
  <FinalForm
    initialValues={initialValues}
    onSubmit={onSubmit}
    render={({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
        <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <Radio
                value="more-unaware"
                type="radio"
                backgroundColorChecked="#94657e"
                backgroundColor="#fff9fc"
                borderColor="#94657e"
                height="2.375rem"
                width="2.375rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>
        <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <Radio
                value="unaware"
                type="radio"
                backgroundColorChecked="#94657e"
                backgroundColor="#fff9fc"
                borderColor="#94657e"
                height="2.0625rem"
                width="2.0625rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>

      </Form>
    )}
  />
);

QuestionsAnswerForm.propTypes = {
  onSubmit: PropTypes.func,
};

QuestionsAnswerForm.defaultProps = {
  onSubmit: () => {},
};

为什么没有传递价值？为什么onChange函数不起作用？

Answer 1

您不能通过单击取消选中单选按钮。您可以使用名称将它们分组在一起，以便一次只能选中该组中的一个。或者您可以像下面提供的示例中那样强迫他们真实或虚假。

这是给您的Code Sandbox示例。

状态不会改变React

1 个答案: