Question

我不确定我做错了什么，这应该很容易！但标题提到当我点击单选按钮时，他们要么不进行检查，要么在错误的时间进行检查。

此处是指向代码https://codesandbox.io/s/0wr7L3K5

的实时版本的链接

这是我的index.js

import React from 'react';
import { render } from 'react-dom';
import Radio from './Radio';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const App = () => (
  <div style={styles}>
    <Radio voteName="yes" label="Yes" />
    <Radio voteName="no" label="No" />
  </div>
);

render(<App />, document.getElementById('root'));

以下是Radio.js

import React, {PropTypes} from 'react';

export default class VoteItem extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedVote: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    const newVal = event.target.value;
    this.setState({
      selectedVote: newVal,
    });
  }
  render() {
    return (
        <div className="input">
        <input
          id={this.props.voteName}
          type="radio"
          value={this.props.voteName}
          name="voteval"
          onChange={this.handleChange}
          checked={this.state.selectedVote === this.props.voteName}
        />
        {this.props.label}
      </div>
    );
  }
}

我已经看到大部分问题所有人都建议删除event.preventDefault()以进行检查，但正如您所看到的那样，我没有。

Answer 1

您应该将所选状态移至Radio.js的超级视图。如： https://codesandbox.io/s/1rXWKZLo0

Answer 2

您需要一个单选按钮组组件。

这个状态包含所选的voteName。

Radio的onChange函数调用此单选按钮组组件的方法，然后重新渲染子组件。

未根据ReactJS状态更改检查单选按钮

2 个答案: