ReactJs：根据 select 值显示或隐藏输入字段

Question

我正在制作一个表单，其中将根据 select 的值显示一些额外的输入。 select 的值在 select 不同的选项时发生变化，但“numberOfUsers”文本字段不可见。

我可以在控制台上看到更改后的值。 Yes 打印在 selecting 第一个选项上，No 打印在 selecting select.

上

我不明白为什么它不起作用。请让我知道我所犯的错误。

下面是我写的代码

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 是一个对象，更新该对象上的 prop 不会更改对该对象的引用，因此 React 的相等性检查将无法识别更改（因此不会重新渲染）。

尝试改变

        fields[name] = value
        setFields(fields)

至

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

Answer 2

状态没有更新，因为状态的引用没有改变。您可以通过在 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]);

ReactJs：根据 select 值显示或隐藏输入字段

ReactJs : Show or hide input fields based on select value

javascript

setstate

reactjs

react-forms