状态不改变 React

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

The state does not change React

radio-button

reactjs

react-props