Reactjs 如何将值从下拉列表传递到 select 上的输入响应式JS

发布于12月15日

我不知道如何将SELECT上的下拉列表中的值传递给4个输入.我的下拉列表显示了地址，但我很难将每个值传递给单独的输入.例如，Address_1应该在一个输入中，其中Address_1是单位数字，Address_2是街道，依此类推.

 const [select,setSelect]=useState()

 <select onChange={(e) => setSelect(e.target.value)}>  

 <option>Select Address</option>
                    {getAddressData?.address? (
                      getAddressData?.address?.map((address: any, id) => (
                        <option>{`${address.Address_1},${address.Address_2}, ${address.Town}, ${address.County}`}</option>

                     <input>

                    type={'text'}
                    name={'flatNumber'}
                    placeholder="Flat Number"
                    value={select}

                   </input>

现在我有完整的地址行，例如(西米德兰兹斯米德兰兹投票街30号)在整个一个输入中.

推荐答案

以下是工作代码.现场直播:https://codesandbox.io/s/competent-firefly-0qdrij?file=/src/App.js

import React, { useState, useEffect } from "react";

function App() {
  const [address, setAddress] = useState({
    Address_1: "",
    Address_2: "",
    Town: "",
    pafCounty: ""
  });

  let getAddressData = {};
  getAddressData.address = [
    {
      Address_1: "Address_1",
      Address_2: "Address_2",
      Town: "Town",
      pafCounty: "pafCounty"
    },
    {
      Address_1: "Address_11",
      Address_2: "Address_22",
      Town: "Town2",
      pafCounty: "pafCounty2"
    }
  ];

  function handleChange(e) {
    setAddress({ ...address, [e.target.name]: e.target.value });
  }

  useEffect(() => {
    console.log(address);
  }, [address]);

  return (
    <>
      <select
        onChange={(e) => {
          setAddress(getAddressData?.address[e.target.value]);
        }}
      >
        <option selected disabled>
          Select Address
        </option>
        {getAddressData?.address?.map((address, index) => (
          <option
            key={index}
            value={index}
          >{`${address.Address_1}, ${address.Address_2}, ${address.Town}, ${address.pafCounty}`}</option>
        ))}
      </select>

      {Object.keys(address).map((key, index) => (
        <input
          type="text"
          name={key}
          placeholder="Flat Number"
          value={address[key]}
          onChange={handleChange}
        />
      ))}
    </>
  );
}

export default App;