Question

我有一个月份列表，将月份显示为文字，但我想要做的是每月返回一个数字值，因此1月将返回＆＃39; 01＆＃39;，2月将返回＆＃39; 02＆＃39;等等...

所以我尝试做的是给每个选项列表项一个prop（monthNumber）数值及其文本值 - 这里是我的列表的样子

        <select onChange={this.monthClickHandler.bind(this)}>
            <option selected={this.props.monthNumber == '01'}>January</option>
            <option selected={this.props.monthNumber == '02'}>February</option>
            <option selected={this.props.monthNumber == '03'}>March</option>
            <option selected={this.props.monthNumber == '04'}>April</option>
            <option selected={this.props.monthNumber == '05'}>May</option>
            <option selected={this.props.monthNumber == '06'}>June</option>
            <option selected={this.props.monthNumber == '07'}>July</option>
            <option selected={this.props.monthNumber == '08'}>August</option>
            <option selected={this.props.monthNumber == '09'}>September</option>
            <option selected={this.props.monthNumber == '10'}>October</option>
            <option selected={this.props.monthNumber == '11'}>November</option>
            <option selected={this.props.monthNumber == '12'}>December</option>
        </select>

在点击处理程序中，我试图返回值

monthClickHandler = (event) => {
    log.debug('Month - Get the month prop - ', this.props.monthNumber);
    log.debug('Month event : ', event);
    log.debug('Month value(): target.value', event.target.value);
}

我可以获取文本值（1月等），但我无法返回monthNumber prop值...它只返回undefined

希望一切都有道理，我在这里缺少什么？如果有人能指出我正确的方向，我将非常感激！

Answer 1

向value添加option，而不是选中，value添加select：

class Months extends React.Component {
  handleChange(event) {
    console.log(event.target.value);
  }
  render() {
    return (
      <select value={this.props.monthNumber} onChange={this.handleChange}>
        <option value='01'>January</option>
        <option value='02'>February</option>
        <option value='03'>March</option>
        <option value='04'>April</option>
        <option value='05'>May</option>
        <option value='06'>June</option>
        <option value='07'>July</option>
        <option value='08'>August</option>
        <option value='09'>September</option>
        <option value='10'>October</option>
        <option value='11'>November</option>
        <option value='12'>December</option>
      </select>
    );
  }
}

ReactDOM.render(React.createElement(Months), document.getElementById('app'));

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

然后在处理程序event.target.value中将是该值。

请参阅React docs

使用React

1 个答案: