反应中的真假单选按钮

Question

这是我当前的代码：

我的组件中的状态

this.state = {
            name: '',
            sample: '',
            description: '',
            isPublished: null,

        };

这是单选按钮的处理程序

_handleRadio(event) {
let value = true;
if (typeof event.currentTarget.value === 'string') {
    (event.currentTarget.value === 'true' ? value = true : value = false );
}
this.setState({isPublished: value});
}

最后这是我的单选按钮

<div className="radio">
                        <label><input type="radio" name="isPublished" value="true" onChange={this._handleRadio} />Yes</label>
                    </div>
                    <div className="radio">
                        <label><input type="radio" name="isPublished" value="false" onChange={this._handleRadio} />No</label>
                    </div>

很抱歉格式不正确，将我的代码复制并粘贴到这里并没有那么好。当我试图修复它时，我把它弄得更糟了。

所以现在，状态正在改变，这正是我想要的。但是当我向我的 api 提交并发出 POST 请求时，isPublished 状态返回到 true。

这是我的提交处理程序

_handleSubmit(event) {
        event.preventDefault();
        event.stopPropagation();
        const sampleObj = this.state;
        console.log(sampleObj);

        api.post('samples', sampleObj).done((result) => {
            console.log('Sample Saved!');
            this.context.router.push(`${result.id}/`);
        }).fail((error) => {
            console.log('failed');
            console.log(error);
        });
    }

为什么 isPublished 的状态在提交过程中返回 true ，即使将其更改为 false ？

Answer 1

我认为存在一些结构性问题。没有垃圾箱很难说，但这是我所看到的......

首先，您将不受控制的组件与受控制的方法混合在一起。例如，您没有在单选按钮上设置 checked 属性（受控），但您也没有检查 refs（或设置它们）的值（不受控制）。应该有一个用于控制的检查属性。

其次，布尔不匹配有很多字符串。假设 true 和 false 是这些按钮的唯一值，请尝试：

const isPublished = event.currentTarget.value === 'true' ? true: false;

我把它放在钢笔里。

https://codepen.io/anon/pen/pNooXq?editors=0010

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            name: '',
            sample: '',
            description: '',
            isPublished: null,

        };
    this._handleRadio = this._handleRadio.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleRadio(event) {
    const isPublished = event.currentTarget.value === 'true' ? true: false;
    console.log('handle', isPublished);
    this.setState({ isPublished });
  }
  _handleSubmit(event) {
        event.preventDefault();
        event.stopPropagation();
        const sampleObj = this.state;
        console.log(sampleObj);
    }

  render() {
    const { isPublished } = this.state;
    console.log(isPublished, true);
    return (
      <form onSubmit={this._handleSubmit}>
        <div className="radio">
          <label>
            <input 
              type="radio" 
              name="isPublished" 
              value="true"
              checked={isPublished === true}
              onChange={this._handleRadio} />
            Yes
          </label>
       </div>
       <div className="radio">
         <label>
           <input 
             type="radio" 
             name="isPublished" 
             value="false"
             checked={isPublished === false}
             onChange={this._handleRadio} />
           No
         </label>
       </div>
        <button type="submit">Submit</button>
    </form>
    );
  }
}