Question

我是React的新手，我想为单选按钮设置一个值，但是在我检查了其中一个按钮之后，然后在为对象设置属性状态后才对其进行检查。

这是我的代码：

import React, {Component} from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);

        this.completeChange = this.completeChange.bind(this);

        this.state = {
            hero: {}
        };
    }

    getHero() {

    }

    completeChange(event) {
        var hero = { ...this.state.hero
        };
        hero.Complete = event.target.value;
        this.setState({
            hero: hero
        }, () => {
            //when the callback is called, the radio button is not checked
            console.log(this.state.hero.Complete);
        });
    }

    render() {
        return (
             <div className="complete">
                  <label>Choose one: </label>
                  <input type="radio" id="Complete" value="true" onChange={this.completeChange}
                      value='true' checked={this.state.hero.Complete == true} />Yes
                      <input type="radio" id="Complete" value="false" onChange={this.completeChange}
                      value='false' checked={this.state.hero.Complete == false} />No
             </div>
        );
    }
}

export default TestComponent;

这是怎么了？这里有人可以解决我的问题吗？

谢谢你。

Answer 1

您正在改变状态。
尝试这种方式：

completeChange(event) {
    const {hero} = this.state;
    const nextHero = {
      ...hero,
      Complete: true
    }
    this.setState({ hero: nextHero }, () => {
        //when the callback is called, the radio button is not checked
        console.log(this.state.hero.Complete);
    });
}

如果您要切换状态，那么我建议使用function version of setState，因为状态更新是异步的，并且无论何时下一个状态依赖于先前的状态，都应使用的功能参数setState，以确保您获得最新状态。

类似这样的东西：

  completeChange(event) {
    this.setState(state => {
      const { hero } = state;
      const nextHero = {
        ...hero,
        Complete: !hero.Complete
      };
      return {
        hero: nextHero
      };
    });
  }

如果您要基于单击的按钮的值来设置状态，则可以检查event.target.value：

completeChange(event) {
    const { hero } = this.state;
    const isComplete = event.target.value === 'true';
    const nextHero = {
      ...hero,
      Complete: isComplete
    };
    this.setState({hero: nextHero});
  }

这是您的代码的运行示例：

class TestComponent extends React.Component {
  constructor(props) {
    super(props);

    this.completeChange = this.completeChange.bind(this);

    this.state = {
      hero: {}
    };
  }

  getHero() {}

  completeChange(event) {
    const { hero } = this.state;
    const isComplete = event.target.value === 'true';
    const nextHero = {
      ...hero,
      Complete: isComplete
    };
    this.setState({hero: nextHero});
  }

  render() {
    return (
      <div className="complete">
        <label>Choose one: </label>
        <input
          type="radio"
          name="Complete"
          value="true"
          onChange={this.completeChange}
          checked={this.state.hero.Complete == true}
        />Yes
        <input
          type="radio"
          name="Complete"
          value="false"
          onChange={this.completeChange}
          checked={this.state.hero.Complete == false}
        />No
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<TestComponent />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

顺便
永远不要对布尔值==：

this.state.hero.Complete == true

在这种情况下，最好改用===：

this.state.hero.Complete === true

如果您对更多详细信息感兴趣，我为此写了post。

Answer 2

您可以直接检查e.target.value=='true'并设置为这样的状态。

您可以检查这里stackblitz的演示是否正常。

代码段

class TestComponent extends Component {
  constructor(props) {
    super(props);

    this.completeChange = this.completeChange.bind(this);

    this.state = {
      hero: {}
    };
  }

  getHero() {

  }

  completeChange(event) {
    this.setState({
      hero: event.target.value == 'true'
    }, () => {
      //when the callback is called, the radio button is not checked
      console.log(this.state.hero);
    });
  }

  render() {
    return (
      <div className="complete">
        <label>Choose one: </label>
        <input type="radio" onChange={this.completeChange}
          value={true} checked={this.state.hero} />Yes

        <input type="radio" value={false} onChange={this.completeChange} checked={!this.state.hero} />No
             </div>
    );
  }
}

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

React无法为单选按钮设置值

2 个答案: