在 Bootstrap5 中获取所有选定的值 Form.Control

Question

我正在尝试从 react-bootstrap 表单中获取所有选定的值。在最新版本的 bootstrap 上，当通过 shift 单击多行选择多个值时，e.target.value 似乎只包含一个值而不是一个列表。我怎样才能得到所有选定的值？最好通过键或 ID。

const Form = ReactBootstrap.Form;
const Button = ReactBootstrap.Button;

const ExampleForm = () => {

  const [output, setOutput] = React.useState("");
  
  function changeSelection(e) {
    setOutput(e.target.value);
  }
  
  function handleSubmit(e) {
    e.preventDefault();
  }
  
  return(
    
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="dimension">
        <Form.Control 
          as="select" 
          multiple 
          onChange={changeSelection}>
          <option key="1" id="1" >1</option>
          <option key="2" id="2" >2</option>
          <option key="3" id="3" >3</option>
          <option key="4" id="4" >4</option>
        </Form.Control>
        <Button type="submit" variant="primary">
                select
        </Button>
      </Form.Group>
      Output: {output}
    </Form>

  );

}

ReactDOM.render(
    <ExampleForm />,
    document.getElementById('app')
);

可以找到 Codepen 示例 here

Answer 1

原来你可以使用 Array.from

Array.from(e.target.selectedOptions, option => option.value)

找到here

在 Bootstrap5 中获取所有选定的值 Form.Control

Getting all selected values in Bootstrap5 Form.Control

javascript

reactjs

react-bootstrap