Question

我从jQuery到React.js，我发现很难根据它们之间的关系来引用dom元素。

当我在第1行中选择一个国家/地区时，我只希望更改第1行的状态选项。

第1行：

<select class="country"></select>
<select class="state"></selct>

第2行：

<select class="country"></select>
<select class="state"></selct>

在jQuery中，我可以轻松完成

$('.country').change(function(){
    const countryStates=`
     <option>Country State 1</option>
     <option>Country State 2</option>
    `;
    $(this).next().html(countryState);
});

如何使用React.js进行上述操作？

Answer 1

使用onChange事件：

const StateSelector = ({contries, states})=>{
  const [countryId, setCountryId] = useState()
  const handleChangeCountry = useCallback((event)=>{
    setCountryId(event.target.value)
  },[])
  return <>
    <select class="country" value={countryId} onChange={handleChangeContry}>
      {coutries.map(c=>(<option key={/*c.id*/} value={/*c.id*/}>{/*c.name*/}</option>))}
    </select>
    <select class="state">
       {states.filter(/*filter by country, e.g. s => s.countryId == countryId*/)
        .map(s=>(<option key={/*s.id*/} value={/*s.id*/}>{/*s.name*/}</option>))}
    </select>
  </>
}

如何基于从react.js中的另一个选择选项中选择的值来仅填充兄弟元素（选择选项）

1 个答案: