javascript - 如何在此选择菜单示例中使用 Reactjs 事件处理程序而不是 jQuery 事件处理程序？

Question

这是我在 StackOverflow 上的第一个问题，所以请耐心等待。

我几天前开始学习ReactJS，还有一些事情我不太清楚。

如何用 ReactJS 替换 jQuery 事件处理程序？

我正在研究这个小选择菜单，但我使用 jQuery 制作了它，现在我想将它用作 ReactJS 组件，并且我尝试管理

$('.select').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
  $('#'+$(e.target).attr('for')).prop('checked',true);
});

$(document).click(function() {
  $('.select').removeClass('expanded');
});

请在此处查看完整代码:https://codepen.io/Wael-Alsabbouh/pen/GvWvzv

这就是我在 ReactJS 中所做的，但仍然无法正常工作!

import React from 'react';

export default class select extends React.Component {
/**
 * Show and hide select options
 */
constructor(props) {
    super(props);
    this.state = { addClass: false, value: '', isToggleOn: true };
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
}

handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn,
        addClass: !this.state.addClass,
    }));
}

handleChange(e) {
    this.setState({
        value: e.target.value,
    });
    e.preventDefault();
}
/**
 * React render
 */
render() {
    const classNames = ['select'];
    if (this.state.addClass) {
        classNames.push('expanded');
    }
    return (
        <div className={classNames.join(' ')} >
            <input type="radio" name="sortType" value={this.handleChange} checked="checked" id="selected-item" onClick={this.handleClick} /><label htmlFor="selected-item">Item 00</label >
            <input type="radio" name="sortType" value={this.handleChange.value} onChange={this.handleChange} /><label htmlFor="Item01">Item 01</label>
            <input type="radio" name="sortType" value={this.handleChange.value} onChange={this.handleChange} /><label htmlFor="Item02">Item 02</label>
            <input type="radio" name="sortType" value={this.handleChange.value} onChange={this.handleChange} /><label htmlFor="Item03">Item 03</label>
            <input type="radio" name="sortType" value={this.handleChange.value} onChange={this.handleChange} /><label htmlFor="Item04">Item 04</label>
            <input type="radio" name="sortType" value={this.handleChange.value} onChange={this.handleChange} /><label htmlFor="Item05">Item 05</label>
        </div>
    );
  }
}

提前谢谢您。

Answer 1

在 less 文件中删除此

&:nth-child(2) {
          margin-top: 2em;
          border-top: .06em solid #d9d9d9;
        }
      }

最好将单选按钮包装在其自己的高阶组件中，并让它保持自己的状态。我创建了一个新的 Radio 类(我不是一个有创意的命名者)作为示例。

   /*
   * A simple React component
   */
   class Select extends React.Component {
  constructor(props) {
        super(props);
        this.state = { addClass: false, value: '', isToggleOn: true };
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleClick() {
    console.log("hello")
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn,
            addClass: !this.state.addClass,
        }));
    }

    handleChange(e) {
        this.setState({
            value: e.target.value,
        });
        e.preventDefault();
    }
  render() {
    const classNames = ['select'];
        if (this.state.addClass) {
            classNames.push('expanded');
        }
    return <div className={classNames.join(' ')} onChange={this.handleChange}>
                <input type="radio" name="sortType" value={this.handleChange.value} checked="checked" id="selected-item" onClick={this.handleClick} /><label htmlFor="selected-item">Item 00</label>
                <Radio name={"Item01"}/>
                <Radio name={"Item02"}/>
                <Radio name={"Item03"}/>
                <Radio name={"Item04"}/>
                <Radio name={"Item05"}/>
            </div>
  }
}


class Radio extends React.Component {
  constructor(props) {
        super(props);
        this.state = { isOn:props.isOn?true:false };
        this.toggleState=this.toggleState.bind(this)
    }
  toggleState(){
    console.log("Look at me I'm changing my own state for "+this.props.name+"!!!!")
    this.setState({isOn:!this.state.isOn})
   }
    render() {
    return <span><input type="radio" name="sortType" value={this.state.isOn} /><label onClick={this.toggleState}  htmlFor={this.props.name}>{this.props.name}</label></span>
  }

}
/*
 * Render the above component into the div#app
 */
React.render(<Select />, document.getElementById('app'));