Question

我可以像这样在html select属性上获取name和name的值：

onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
};

<select name="gender" onChange={this.onChange}>
      <option selected>Choose</option>

如果我打印它，就像gender:"woman"。但是我还有一个选择name="gender"的选择，我想将它们作为数组。如果我再选择一个而未更改onChange方法，则打印将像gender:"man"（最后选择的值）。我在互联网上进行调查，但找不到与此问题有关的任何内容。

Answer 1

如果我的理解是正确的，那么您有2个select和name="gender"，并且您希望将它们的值存储在单个数组中。

您必须具有存储阵列的状态，

state = {
    geneder: []
}

您的onChange处理程序应该是这个

onChange = (e) => {
  this.setState({
     [e.target.name]: [...this.state[e.target.name], e.target.value]
  })
}

Demo

Answer 2

您是否尝试过事件保留？文件[{https://en.reactjs.org/docs/events.html]

from dateutil.relativedelta import relativedelta
(datetime.now() - relativedelta(months=1)).strftime('%Y/%m')

或将名称的值分配给变量

 onChange = e => {
    e.persist()
    this.setState({ [e.target.name]: e.target.value });
  };

Answer 3

const data = [
  {
    name: 'gender',
    data: ["woman", "man"],
  },
  {
    name: 'age',
    data: [18, 19],
  },
];
class Application extends React.Component {
  state = {
    data: []
  };
  
  onChange = (e) => {
  this.setState({data: [...this.state.data, {[e.target.options[e.target.selectedIndex].getAttribute('name')]: e.target.value}]});
  };
  
  render() {
    return (
      <div>
        <select onChange={this.onChange}>
          <option selected> Choose </option>
          {data.map(pitem => pitem.data.map(item => <option name={pitem.name}>{item}</option>))}
        </select>
        <div>{this.state.data}</div>
      </div>
    );
  }
}
React.render(<Application /> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

React通过名称数组获取选择值

3 个答案: