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

【问题标题】：Value of React input field persists when clicking单击时 React 输入字段的值仍然存在
【发布时间】：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>{totalExpenses}{currencySymbol}</div>
            </Grid>
        </Grid>
    );
  }

  export default IncomeExpensesContainer;

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

【问题讨论】：

标签： reactjs material-ui state default-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>{totalExpenses}{currencySymbol}</div>
            </Grid>
        </Grid>
    );
  }

  export default IncomeExpensesContainer;

【讨论】：