Question

https://codesandbox.io/s/pQB0vLY4X

const App = (item) => (
  <div>
    <select
      vlaue={item && item.space_size_uom}
      name="measure"
      className="input square_feet_select"
    >
      <option value="">
        Please select
      </option>
      <option value="sqft">
        sqft
      </option>
      <option value="sqm">
        sqm
      </option>
    </select>
  </div>
);

item.space_size_uom是'sqft'，但为什么没有选择该项？

Answer 1

您有两个问题..首先，您选择的vlaue需要输入错误value

const App = ({space_size_uom) => (
  <div>
    <select
      value={space_size_uom || null}
      name="measure"
      className="input square_feet_select"
    >

第二..你没有选择的变更处理程序。所以当你试图选择一些你无法做到的事情时。现在，如果您希望它是只读下拉列表，这不是问题。但是你应该只使用选择以外的其他东西来显示测量单位。

如果您希望能够更改/选择其他内容，则应使用状态变量。其中包括将此功能组件更改为反应类。

class App extends Component {
  constructor(props) {
      super(props);
      this.state = { uom: props.space_size_uom};
  }
  render() {
    return (
      <div>
        <select
          value={this.state.uom}
          name="measure"
          className="input square_feet_select"
          onChange={this.handleUomChange}
        >
         ....
     )
   }
}

然后你的处理程序看起来像

handleUomChange = (e) => {
    this.setState({uom: e.target.value});
}

Answer 2

您在value和space_size_uom中存在拼写错误。此外，您应解构像const App = ({item}) => ..这样的道具，直接在您的代码中使用item;

更新了代码：https://codesandbox.io/s/ElXmYNZM4

react select不选择正确的选项

2 个答案: