时间戳

首页 > 解决方案 > 在 React 中使用无线电的正确方法是什么？一旦选中，按钮就会被冻结

javascript - 在 React 中使用无线电的正确方法是什么？一旦选中，按钮就会被冻结

问题描述

我正在使用状态来控制我的组件，并且我不确定以下代码的哪一部分导致代码按钮在检查后冻结。这是构造函数：

  constructor(props) {
    super(props);


    this.state = {

      firstName: '',
      
      inPerson: false,
      onlineMedium: true,
    };

  }

这个函数应该处理变化：

  handleFormChange = (event) => {
    const target = event.target;

 if (target.name === "inPerson" || target.name === "onlineMedium") {

      const value = !this.state[target.name]

      const name = target.name;
      this.setState({
        [name]: value
      });
    } 
else {
      const value = target.value;
      const name = target.name;

      this.setState({
        [name]: value
      });
    }
  }

这将呈现组件：

  render() {

    return (
      <>
        <label className="tutor-add-label">
          First name
        <input
            className="tutor-add-input"
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleFormChange}
          />
        </label>
        <div className="medium">
          <input
            type="radio"
            id="online"
            name="onlineMedium"
            checked={this.state.onlineMedium}
            onChange={this.handleFormChange}
          />
          <label htmlFor="online">online</label>

          <input
            type="radio"
            id="person"
            name="inPerson"
            checked={this.state.inPerson}
            onChange={this.handleFormChange}
          />
          <label htmlFor="person">In person</label>
        </div>

      </>
    )
  }

编辑：根据下面的评论，如果有另一种选择/取消选择效果更好的收音机的方法，请告诉我。我正在关注这个http://react.tips/radio-buttons-in-react-16/

更新：由于某种原因，似乎没有发生点击（在第一次点击之后）。这似乎指向任何方向？

标签： javascriptreactjs

解决方案

这对我有用：

将事件处理程序从 更改onChange为onClick并使用以下内容来控制状态：

        if (target.name === "onlineMedium" || target.name === "inPerson") {
            if (event.target.checked && !this.state[target.name]) {
                this.setState({
                    [target.name]: true,
                })
            }
            else if (event.target.checked && this.state[target.name]) {
                this.setState({
                    [target.name]: false,
                })
            }

        }

信用：它的灵感来自这个答案：https ://stackoverflow.com/a/57147343/10813256

推荐阅读