如何从select中获取选项值

Question

我正在寻找一种从select中获取选项值的方法。

主要的一点是，我希望从select中获得值，然后显示与carArray不同的car。

我还在学习反应，所以请告诉我该走哪条路。

我的代码：

import React, { useState } from 'react'

const UserCar = () => {

    const carArray = [
        {id: 1,name: "Opel Astra", brand: "Opel", model: "Astra J ST SPORT 2.0 CDTI", plate: "KGR XXX"},
        {id: 2,name: "Opel Frontera", brand: "Opel", model: "Frontera 2.2DTI 4x4", plate: "KGR XXX1"},
        {id: 3,name: "Peugeot 207", brand: "Peugeot 207", model: "Peugeot 207 1.4", plate: "KGR XXX2"},
    ]


    const handleChange = (event) => {
        
       const aaa = this.setState({value: event.target.value});      
       console.log(aaa);  
    }


    return (
    <div>
        <select onChange={handleChange}>
            {
                carArray.map(function(element){
                    return(
                        <option value={element.name}> {element.name}</option> 
                    )
                })
            }

            </select>  

/*****\/ Here i want to display car details depend on which one option is selected *****/
                       <form>
                        <fieldset disabled>
                            <legend>Twój samochód: </legend>
                            <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Marka Pojazdu</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="Opel" />
                            </div>
                             <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Model Pojazdu</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="Astra J ST SPORT 2.0 CDTI " />
                            </div>
                            <div class="mb-3">
                                <label for="disabledTextInput" class="form-label">Rejestracja</label>
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="KGR XXX" />
                            </div> 
                            
                        </fieldset>
                        <button type="submit" class="btn btn-primary m-4 float-end">Zmień</button>
                    </form> 
    </div>
  )
} 


export default UserCar

Answer 1

您的JSX代码有几个问题。

1. JSX语法

应该用htmlForm.

• HTML属性替换
• HTML属性for，应该用className.

替换class属性

在功能组件中，您需要使用useState 钩子而不是 this.setState**.**。

3.正确实现.

• 定义状态变量来存储所选的汽车信息。

const [selectedCar, setSelectedCar] = useState();

• In OnChange函数中的select元素，您将更新selectedCar状态变量。

setSelectedCar(carArray.find((ele) => event.target.value == ele.id));

您的组件UserCar应该如下所示。

const UserCar = () => {
  const [selectedCar, setSelectedCar] = useState<any>();
  const carArray = [Your car array];

  const handleChange = (event) => {
    setSelectedCar(carArray.find((ele) => event.target.value == ele.id));
  };

  return (
    <div>
      <select onChange={handleChange}>
        {carArray.map((element) => {
          return (
            <option key={element.id} value={element.id}>
              {element.name}
            </option>
          );
        })}
      </select>
      {selectedCar && (
        <div>
          {selectedCar.name}, {selectedCar.brand}, {selectedCar.model}
        </div>
      )}
      <form>
        ...
      </form>
    </div>
  );
};