Question

I want to print the selected value, and below is my option list:

const vesselName = [
  {
    value:  0 ,
    label:  ALBIDDA ,
  },
  {
    value:  1 ,
    label:  ALRUMEILA ,
  },
  {
    value:  2 ,
    label:  MAJD ,
  },
  {
    value:  3 ,
    label:  OSHAIRIJ ,
  },
]

here is the structure of my select components:

const App = () => {const [status, setStatus] = useState([0])const [vessel, setVessel] = useState(  )const handleSelect = (value, evt) => {setVessel(evt.label)console.log(vessel)}

return (<div style={{ margin:  50px  }}><Row gutter={[50, 50]}><Col><Row><div style={{ padding:  8px 10px 0 0  }}>Vessel Name:</div><SelectdefaultValue="0"options={vesselName}style={{ width:  120px  }}onChange={(value, evt) => handleSelect(value, evt)}value={vessel}/></Row></Col>

now the problem is every time, I click the option, the previous selection value will be printed out, why this happened?

enter image description here

when I clicked the third option, the second option will be printed out.

and what default value should I set in useState? Because I have set the default value in <select/>, but when I use useState, the default value did not work.

Answer 1

I think it is my example. I hope that can help you. the default should be the value of an obj of the array that you wanted as a default selected object.

pls check it out here: example of select react & antD

import { useState } from "react";
import { Row, Col, Select } from "antd";
const App = () => {
  const [value, setValue] = useState(0);
  const [obj, setObj] = useState();

  const vesselName = [
    {
      value: "0",
      label: "ALBIDDA"
    },
    {
      value: "1",
      label: "ALRUMEILA"
    },
    {
      value: "2",
      label: "MAJD"
    },
    {
      value: "3",
      label: "OSHAIRIJ"
    }
  ];
  const handleChange = (value, option) => {
    console.log(value);
    console.log(option);
    console.log(option.label);
    setValue(value);
    setObj(option);
  };
  return (
    <div style={{ margin: "50px" }}>
      <Row gutter={[50, 50]}>
        <Col>
          <Row>
            <div style={{ padding: "8px 10px 0 0" }}>Vessel Name:</div>
            <Select
              defaultValue={value}
              style={{ width: 120 }}
              onChange={handleChange}
              options={vesselName}
            />
          </Row>
          <Row>
            <div>
              <p>selected obj: {JSON.stringify(obj)}</p>
              <p>Selected Value: {JSON.stringify(value)}</p>
            </div>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
export default App;

友情链接