单击时 React 输入字段的值仍然存在

Posted 2023-03-15

【中文标题】单击时 React 输入字段的值仍然存在

【英文标题】：Value of React input field persists when clicking

【发布时间】：2021-08-31 21:55:51

【问题描述】：

我正在尝试使用从 DB 中获取的值作为输入字段的初始值（在单击组件之前显示）。

但是，当单击或输入输入字段时，输入字段的value 仍然存在，这意味着无法输入新值。

组件的文件：

import React,  useEffect, useState  from "react";
import InputItem from './InputItem';
import Grid from '@material-ui/core/Grid';
import axios from 'axios';

interface Props 
    income: string;
    setIncome: (value: string) => void; 
    totalExpenses: number;
    currencySymbol: string;


const IncomeExpensesContainer: React.FC<Props> = (
        income,
        setIncome, 
        totalExpenses, 
        currencySymbol,
    : Props) => 

    // Initializing didMount as false
    const [didMount, setDidMount] = useState(false);

    // Setting didMount to true upon mounting
    useEffect(() =>  setDidMount(true) , []);

   useEffect(() => 
        if (didMount) 
            axios.delete('http://localhost:4000/app/income')
            .catch(function (error) 
                console.log(error);
            );
    
            axios.post('http://localhost:4000/app/income', 
            
                income: income
            );
        
    , [didMount,income]);
 
    return (
        <Grid container spacing=1 className="income-expenses-container">
            <Grid item xs=6>
                <InputItem 
                    onBlur=setIncome
                    title="Income" 
                    type="number" 
                    placeholder="Your income" 
                    value=income
                    />
            </Grid>
            <Grid item xs=6 className="centered">
                <h3>Total Expenses</h3>
                <div>totalExpensescurrencySymbol</div>
            </Grid>
        </Grid>
    );
  

  export default IncomeExpensesContainer;

value 怎么可能只用作输入字段的初始值？ 谢谢！

【参考方案1】：

请改用 defualtValue 属性。见Uncontrolled Components。

在 React 渲染生命周期中，表单元素上的 value 属性 将覆盖 DOM 中的值。使用不受控制的组件， 你经常希望 React 指定初始值，但离开 随后的更新不受控制。要处理这种情况，您可以指定 defaultValue 属性而不是 value。

<InputItem 
  onBlur=setIncome
  title="Income" 
  type="number" 
  placeholder="Your income" 
  defaultValue=income
/>

【讨论】：

感谢您的回答！但是，如果我将value 替换为defaultValue，则输入的初始值 i= 等于零

@grubbyGerbil 抱歉，您的 sn-p 中哪里有 i=？

对不起，我的意思是“输入的初始值等于零”

@grubbyGerbil 初始值是传递的income prop。您是说income 不是您在安装IncomeExpensesContainer 组件时所期望的值吗？您可以将父组件添加到您的问题中吗？

亲爱的 Drew，我终于找到了解决方案并将其发布为我的问题的答案。

【参考方案2】：

我已经找到解决办法了：

已创建 const [insertedValue, setInsertedValue] = useState(income);并赋值=insertedValue 使用useEffect(() => setInsertedValue(income) , [income]);

这是更新后的代码：

import React,  useEffect, useState  from "react";
import InputItem from './InputItem';
import Grid from '@material-ui/core/Grid';
import axios from 'axios';
interface Props 
    income: string;
    setIncome: (value: string) => void; 
    totalExpenses: number;
    currencySymbol: string;


const IncomeExpensesContainer: React.FC<Props> = (
        income,
        setIncome, 
        totalExpenses, 
        currencySymbol,
    : Props) => 

    const [insertedValue, setInsertedValue] = useState<string>(income);

    // Initializing didMount as false
    const [didMount, setDidMount] = useState(false);

    // Setting didMount to true upon mounting
    useEffect(() =>  setDidMount(true) , []);
    
    useEffect(() =>  
        setInsertedValue(income) 
    , [income]);

   useEffect(() => 
        if (didMount) 
            axios.delete('http://localhost:4000/app/income')
            .catch(function (error) 
                console.log(error);
            );
    
            axios.post('http://localhost:4000/app/income', 
            
                income: income
            );
        
    , [didMount,income]);
 
    return (
        <Grid container spacing=1 className="income-expenses-container">
            <Grid item xs=6>
                <InputItem 
                    onChange=setInsertedValue
                    onBlur=setIncome
                    title="Income" 
                    type="number" 
                    placeholder="Your income" 
                    value=insertedValue
                    />
            </Grid>
            <Grid item xs=6 className="centered">
                <h3>Total Expenses</h3>
                <div>totalExpensescurrencySymbol</div>
            </Grid>
        </Grid>
    );
  

  export default IncomeExpensesContainer;