我怎样才能让 <select> 字段根据来自 React 中另一个 <select> 字段的输入动态变化？

Question

我正在尝试让“类别”select 字段根据“类型”类别中的 selection 进行更改。因此，如果我 select 来自第一个 selection 的“收入”，那么它只会向我显示与收入相关的类别（收入、政府信贷）。如果我 select 支出，它只会显示支出类别（用品、租金、互联网等）。

如果您有建议，或者 tutorial/video 我可以遵循的某个地方，那将真正帮助我。这是我尝试完成的第一个编码项目，我快完成了:)

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'

const AddToFinancials = ({setUpdate}) => {

    const dispatch = useDispatch()

    const [type, setType] = useState('')
    const [date, setDate] = useState('')
    const [amount, setAmount] = useState('')
    const [category, setCategory] = useState('')
    const [details, setDetails] = useState('')

    const handleAddExpense = (e) => {
        e.preventDefault()
        setUpdate()
        // dispatch()
    }

    return (
        <div>
            <div>
                <form className="ui form" onSubmit={handleAddExpense}>
                    <div className="ui fields">
                        <div className="ui field">
                            <select value={type} onChange={(e)=>setType(e.target.value)} className="ui fluid search dropdown" placeholder="Select type">
                                <option value="" disabled="disabled">Select transaction type</option>
                                <option>Income</option>
                                <option>Expense</option>
                                <option>RRSP Contribution</option>
                                <option>Donation</option>
                            </select>
                        </div>
                        <div className="ui field">
                            <input value={date} onChange={(e)=>setDate(e.target.value)} type="date" className="ui input" />
                        </div>
                        <div className="ui field">
                            <input value={amount} onChange={(e)=>setAmount(e.target.value)} className="ui input" type="text" placeholder="Amount"/>
                        </div>
                        
                        <div>
                            {()=>{
                            switch (type) {
                                case 'income':
                                    return (
                                        <div className="ui field">
                                            <select className="ui fluid search dropdown" placeholder="Select category">
                                                <option value="" disabled="disabled">Select category</option>
                                                <option>Revenue</option>
                                                <option>Government credit</option>
                                            </select>
                                        </div>
                                    )
                                case 'expense':
                                    return (
                                        <div className="ui field">
                                        <select  className="ui fluid search dropdown" placeholder="Select category">
                                                <option value="" disabled="disabled">Select category</option>
                                                <option>Advertising</option>
                                                <option>Supplies</option>
                                            </select>
                                            </div>
                                    )
                                case '':
                                    return (
                                        <div>
                                            <select>
                                                <option>non</option>
                                            </select>
                                        </div>
                                    )
                                default:
                                    return (
                                        <div className="ui field">
                                        <select  className="ui fluid search dropdown" placeholder="Select category">
                                                <option value="" disabled="disabled">Select category</option>
                                            </select>
                                            </div>
                                    )
                            }
                        }}
                                            
                        </div>           

                        <div className="ui field">
                            <input className="ui input" type="text" placeholder="Details"/>
                        </div>
                        <button type="submit" className="ui button">Add</button>
                    </div>                 
                </form>
            </div>
        </div>
    )
}

export default AddToFinancials

Answer 1

您只需在 div 中添加一个具有不同 select 组件的三元运算符，而不是调用函数：

<div className="ui field">
       { type ==='income' ? (
          <select
            className="ui fluid search dropdown"
            placeholder="Select category"
          >
            <option value="" disabled="disabled">
              Select category
            </option>
            <option>Revenue</option>
            <option>Government credit</option>
          </select>
        ) : type === 'expense' ? (

          <select
            className="ui fluid search dropdown"
            placeholder="Select category"
          >
            <option value="" disabled="disabled">
              Select category
            </option>
            <option>Advertising</option>
            <option>Supplies</option>
          </select>
  
        ) : type === '' ? (
          <select>
            <option>non</option>
          </select>
        ) :(

          <select
            className="ui fluid search dropdown"
            placeholder="Select category"
          >
            <option value="" disabled="disabled">
              Select category
            </option>
          </select>
        )}
      </div>

Answer 2

为了完整起见，您可以移动此块：

switch (type) {
  case 'income':
    return ( <
      div className = "ui field" >
      <
      select className = "ui fluid search dropdown"
      placeholder = "Select category" >
      <
      option value = ""
      disabled = "disabled" > Select category < /option> <
      option > Revenue < /option> <
      option > Government credit < /option> <
      /select> <
      /div>
    )
  case 'expense':
    return ( <
      div className = "ui field" >
      <
      select className = "ui fluid search dropdown"
      placeholder = "Select category" >
      <
      option value = ""
      disabled = "disabled" > Select category < /option> <
      option > Advertising < /option> <
      option > Supplies < /option> <
      /select> <
      /div>
    )
  case '':
    return ( <
      div >
      <
      select >
      <
      option > non < /option> <
      /select> <
      /div>
    )
  default:
    return ( <
      div className = "ui field" >
      <
      select className = "ui fluid search dropdown"
      placeholder = "Select category" >
      <
      option value = ""
      disabled = "disabled" > Select category < /option> <
      /select> <
      /div>
    )
}

进入函数：

const renderDetails = (type) => {
  switch (type) {
    ...
  }
}

并在 div 中调用函数，如下所示：

<div>
  {renderDetails(type)}
</div>

之后，我会将整个 renderDetails-function 移动到一个单独的模块中并导入它，这样可以更轻松地为其创建单元测试！

我怎样才能让 <select> 字段根据来自 React 中另一个 <select> 字段的输入动态变化？

How can I get a <select> field to change dynamically based on the input from another <select> field in React?

javascript

reactjs

forms

input

dynamicform