如何在 onChange 事件触发时获取 <td> 标签中的值？

Question

当我将“位置状态”从活动更改为非活动或相反时，我想获取“位置 ID”中的值。

Sample Image

我的反应代码：

{
    (locationDetail.length > 0 && locationDetail[0].location_name) ? locationDetail.map((value, key) => (
        <tr>
            <th scope="row" key={key} >{key + 1}</th>
            <td>{value.location_name}</td>
            <td>{value.location_id}</td>
            <td>{value.country}</td>
            <td>{value.state}</td>
            <td>{value.city}</td>
            <td>{value.airport_code}</td>
            <td>
                <select class="form-select form-select-sm">
                    {value.is_active ? (
                        <>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </>
                    ) :
                        (
                            <>
                                <option value="active" selected>Inactive</option>
                                <option value="inactive">Active</option>
                            </>
                        )}

                </select>
            </td>
        </tr>

    )) : ""
}

提前致谢！！

Answer 1

我没看到你在 <select> 上有 onChange 处理程序，但如果你想处理或切换值，你可以这样做

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

然后

<Dropdown options={options} />

Answer 2

将更改事件添加到 select 并将位置 ID 传递给该函数。

<select class="form-select form-select-sm" onChange={()=>handleLocationStatusChange(value.location_id)}>
    {value.is_active ? (
        <>
            <option value="active" selected>Active</option>
            <option value="inactive">Inactive</option>
        </>
    ) :
        (
            <>
                <option value="active" selected>Inactive</option>
                <option value="inactive">Active</option>
            </>
        )}

</select>

Answer 3

您只需使用 select

添加一个 onChange 处理程序

<tr>
        <th scope="row" key={key} >{key + 1}</th>
        <td>{value.location_id}</td>
<td>
                <select class="form-select form-select-sm" onChange={() => console.log(value.location_id)}>
                    {value.is_active ? (
                        <>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </>
                    ) :
                        (
                            <>
                                <option value="active" selected>Inactive</option>
                                <option value="inactive">Active</option>
                            </>
                        )}

                </select>
            </td>
        </tr>

Answer 4

在@More 的回答之上建立一个更简单的方法是使用三元运算符。

<select class="form-select form-select-sm" onChange={()=>handleLocationStatusChange(value.location_id)}>
   <option value="active" selected>{value.is_active ? "Active" : "Inactive"}</option>
   <option value="inactive">{value.is_active ? "Inactive" : "Active"}</option>
</select>

如何在 onChange 事件触发时获取 <td> 标签中的值？

How to get value present in <td> tag when onChange event trigger?

reactjs

react-hooks