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

Posted 2023-02-18

【中文标题】ReactJs：根据选择值显示或隐藏输入字段

【英文标题】：ReactJs : Show or hide input fields based on select value

【发布时间】：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 我可以看到控制台上打印了选定的值。当我选择第一个选项时打印“是”，选择第二个选项时打印“否”。

【参考方案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]);

【讨论】：

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