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>
    );
  }
}

Answer 2

我看不到您的实际JSX，但如果您希望它们反映当前状态，您需要在相应的单选按钮中设置已检查属性吗？

所以，比如：

checked={this.state.isPublished === true}

第一个单选按钮;

checked={this.state.isPublished === false}

第二个。

反应中的真假单选按钮

2 个答案: