ReactJs：根據 select 值顯示或隱藏輸入字段

Question

我正在制作一個表單，其中將根據 select 的值顯示一些額外的輸入。 select 的值在選擇不同選項時發生變化，但“numberOfUsers”文本字段不可見。

我可以看到控制台上正在打印更改的值。 選擇第一個選項時打印 Yes，選擇 select 時打印 No。

我不明白為什么它不起作用。 請讓我知道我所犯的錯誤。

下面是我寫的代碼

import React from 'react'
import { useState } from 'react'
import { Grid } from '@mui/material'
import './Form.css'

export const AddStartupForm = () => {

    const [fields, setFields] = useState({})

    function handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        
        fields[name] = value
        setFields(fields)
        console.log(fields['revenueGenerated'])
    }

    
    return (
        <Grid container sx={{py: 5}}>
        <Grid item xs={1} sm={4}></Grid>
        <Grid item xs={10} sm={4}>
            <form>
                <label htmlFor="startupName">Startup Name</label>
                <input type="text" 
                    name="startupName"                     
                    onChange={handleChange}
                    value={fields["startupName"]}
                />

                <label htmlFor="countryName">Country</label>                
                <input type="text" 
                    name="countryName"                     
                    onChange={handleChange}
                    value={fields["countryName"]}
                />            

                <label htmlFor="revenueGenerated">Do you make revenue?</label>
                <select name="revenueGenerated"
                    onChange={handleChange}
                    value={fields["revenueGenerated"]}
                >
                    <option disabled selected value=''> -- select an option -- </option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>

                { fields['revenueGenerated'] === 'Yes' ?
                   <>
                       <label htmlFor="numberOfUsers">Sample Yes</label>
                       <input type="text"
                           name="numberOfUsers"
                       />
                   </>
                   : null
               } 
                
            </form>            
        </Grid>
        </Grid>
    )
}

Answer 1

fields是一個 object 並更新該 object 的道具不會更改對 object 的引用，因此 react 的相等性檢查將無法識別更改（因此不會重新呈現）。

嘗試改變

        fields[name] = value
        setFields(fields)

至

        setFields({...fields, [name]: value})

Answer 2

state 沒有更新，因為 state 的引用沒有改變。 您可以通過在您的return語句之前添加一個console.log來嘗試：

  console.log(fields);

  return (...)

它永遠不會改變。

嘗試像這樣設置您的字段：

function handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    
    setFields({
      ...fields,
      [name]: value
    });
  }

如果您將處理程序更改為使用useCallback ，請確保將fields添加為依賴項，以便更改：

const handleChange((event) => { 

    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;


    setFields({
      ...fields,
      [name]: value
    });


 }, [fields]);