Question

我有一个import ast s = ['(-315.0, 106.0)\n', '(-179.0, -163.0)\n', '(90.0, 76.0)'] res = [ast.literal_eval(d) for d in s] print(res)表单元素，其中包含从道具获得并映射为选项的项目列表。每个选项都有一个路由值（选项键）和一个描述值（选项显示）。

select元素具有一个onChange处理函数。我只能基于所选项目传递选项属性之一（<select>）。设置状态后，value的值是不确定的。

我见过类似的问题，但是它们使用的是较早的语法。

如何根据所选项目传递路径值和描述值？

number

**更新**

我根据Oliver的建议更新了代码，并在import React from 'react'; class RouteSelect extends React.Component { state = { selectedRoute: { name: '', number: '' } } setSelectedRoute(route, e) { this.setState({ selectedRoute: { name: e.target.value, number: route } }); //console.log(this.state.selectedRoute); } render() { let routes = this.props.state.routes; let routeOptions = routes.map((route) => <option key={route.Route._text}>{route.Description._text}</option> ); return ( <> <select value={this.state.selectedRoute.Description} onChange={(e) => this.setSelectedRoute(routes.Route, e)} > {routeOptions} </select> { console.log(this.state) } </> ); } }; export default RouteSelect;处理程序中添加了useState钩子。我仍然无法获得路线编号。我目前已将其设置为onChange，这将按预期返回整个路由数组。我只添加了routes作为值，以表明以这种方式设置状态是可行的。如何根据所选路线设置路线编号？

RouteSelect.js

routes

RouteForm.js

import React, { useState, Fragment } from 'react';

const RouteSelect = props => {

    const { routes } = props;

    //console.log(routes);

    const [selectedRoute, setSelectedRoute] = useState({
        name: '',
        number: ''
    });

    const routeOptions = routes.map(route =>
        <option key={route.Route._text}>{route.Description._text}</option>
    );

    return (
        <Fragment>
            <select onChange={event =>       
                setSelectedRoute({
                    name: event.target.value,
                    number: routes
                })}
            >
                {routeOptions}
            </select>
            {console.log(selectedRoute)}
        </Fragment>
    );
};

export default RouteSelect;

Answer 1

由于路线处于this.props.state中（可能将其重命名以减少混乱），因此您无需通过它：

class RouteSelect extends React.Component {
  state = {
    selectedRoute: {
      name: '',
      number: '',
    },
  };
  //make it an arrow function to auto bind this
  setSelectedRoute = e =>
    this.setState({
      selectedRoute: {
        name: e.target.value,
        number: this.props.state.routes.Route,
      },
    });

  render() {
    let routes = this.props.state.routes;
    let routeOptions = routes.map(route => (
      <option key={route.Route._text}>
        {route.Description._text}
      </option>
    ));

    return (
      <>
        <select
          value={this.state.selectedRoute.Description}
          onChange={this.setSelectedRoute}
        >
          {routeOptions}
        </select>
        {console.log(this.state)}
      </>
    );
  }
}

export default RouteSelect;

Answer 2

最新语法如下所示：

import React, { useState, Fragment } from 'react';

const RouteSelect = props => {
    const { routes } = props;
    const [selectedRoute, setSelectedRoute] = useState({ name: '', number: '' });

    const handleChange = route => event => {
        setSelectedRoute({ name: event.target.value, number: route });
    };

    const routeOptions = routes.map(route => <option key={route.Route._text}>{route.Description._text}</option>);

    return (
        <Fragment>
            <select value={selectedRoute.Description} onChange={handleChange(routes.Route)}>
                {routeOptions}
            </select>
            {console.log(selectedRoute)}
        </Fragment>
    );
};

export default RouteSelect;

我认为必须注意您切勿使用this.props.state.x，因为这很令人困惑。数据应按状态（本地状态或redux存储）进行处理，或通过props传入上方。

Answer 3

也许最简单的解决方案是尝试根据选择的值从选项数组中获取所需的值。

因此，在您的onChange处理程序中，按选定的值搜索相应的路由。

如何在React中将多个属性传递给onChange处理程序？

3 个答案: