从选择中获取value——react

IT技术 javascript html css reactjs
2021-04-02 05:26:22

我尝试了一些东西来显示select标签的值。

我尝试的第一件事是event.target.value使用onChange. 我尝试的第二件事是event.nativeEvent.value

不可能，所以如果你有我的奇迹！我把那个

所以如果你愿意，我会发布我的部分代码： 

class App extends Component {

    constructor(props) {
        super(props);
        this._createBounds();
        this.state = {
            value: 'a'
        }

    }

    _createBounds() {
        ['_handleSubmit', '_renderTasks', '_handleChange']
            .forEach((fn) => this[fn] = this[fn].bind(this));
    }

    _handleChange(event) {
        this.setState({ value: event.currentTarget.value }) // I tried before target.value, or nativeEvent.value
    }

    render() {
        return (
            <div className="container">
                <div className="list-container">
                    <div className="list-select">
                        <select
                            onChange={this._handleChange()}
                            className="ant-input selectBox"
                            style={{width: 200}}
                            placeholder="Select a person"
                            ref={ref => {
                                this._select = ref
                            }}
                            value={this.state.value}
                            defaultValue={this.state.value}
                        >
                            <option value="a">A</option>
                            <option value="b">B</option>
                            <option value="c">C</option>
                            <option value="d">D</option>
                            <option value="e">E</option>
                            <option value="f">F</option>
                            <option value="g">G</option>
                            <option value="h">H</option>
                            <option value="i">I</option>
                            <option value="j">J</option>
                            <option value="k">K</option>
                            <option value="l">L</option>
                            <option value="m">M</option>
                            <option value="n">N</option>
                            <option value="o">o</option>
                            <option value="p">P</option>
                            <option value="q">Q</option>
                            <option value="r">R</option>
                            <option value="s">S</option>
                            <option value="t">T</option>
                            <option value="u">U</option>
                            <option value="v">V</option>
                            <option value="w">W</option>
                            <option value="x">X</option>
                            <option value="y">Y</option>
                            <option value="z">Z</option>
                        </select>
                  </div>
              </div>
          </div>
        );
    }
}

2个回答

将您的 onChange 更改为此。 

onChange={this._handleChange}

还有另一种你可以尝试的 handleChange 方法

handleChange(e) {
let {name, value} = e.target;
this.setState({
  [name]: value,

});

}
pffffff... 完成了，juste 的问题：this._handleChange 就是为了那个...谢谢你
2021-06-17 05:26:22 
import React, { Component } from 'react';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 'a'
    }
  }

  _handleChange = (event) => {
    this.setState({ value: event.target.value })
  }

  render() {
    return (
      <div className="container">
        <div className="list-container">
          <div className="list-select">
            <select
              onChange={this._handleChange}
              className="ant-input selectBox"
              style={{ width: 200 }}
              placeholder="Select a person"
              ref={ref => {
                this._select = ref
              }}
              defaultValue={this.state.value}
            >
              <option value="a">A</option>
              <option value="b">B</option>
              ...
            </select>
          </div>
        </div>
      </div>
    );
  }
}

您不应_handleChange在onChange处理程序中调用。包含两者是不好的做法

value={this.state.value}
defaultValue={this.state.value}

在 React 的下拉菜单中。您可以提供两者之一，但不能同时提供。

如果您打算将该处理程序用于多个输入，那么您应该考虑这样做。

_handleChange = ({ target: { name, value } }) => {
    this.setState({ [name]: value })
}
其它你可能感兴趣的问题
上一篇如何使用 ReactJS 中的单击事件从列表中删除项目？ 下一篇如何在 react 的 material-ui 中获取密码字段值