ReactJs：根据选择值显示或隐藏输入字段答案

【问题标题】：ReactJs : Show or hide input fields based on select valueReactJs：根据选择值显示或隐藏输入字段
【发布时间】：2022-01-18 18:55:35
【问题描述】：

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

我可以看到控制台上正在打印更改后的值。选择第一个选项时打印是，选择选择时打印否。

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

下面是我写的代码

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>
    )
}

【问题讨论】：

如果您更改选择，控制台打印的内容，请在问题中包含所有相关数据。
由于设置任何状态都是异步的，所以控制台可能会打印较旧的值，请尝试 console.log value 直接
@SayyedDawood 我可以看到控制台上打印了选定的值。当我选择第一个选项时打印“是”，选择第二个选项时打印“否”。

标签： javascript reactjs setstate react-forms

【解决方案1】：

fields 是一个对象，更新该对象上的 prop 不会更改对该对象的引用，因此 react 的相等性检查不会识别更改（因此不会重新渲染）。

尝试改变

        fields[name] = value
        setFields(fields)

到

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

【讨论】：

【解决方案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]);

【讨论】：

谢谢，它现在可以正常工作了。