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

如何解决单击时 React 输入字段的值仍然存在

我正在尝试使用从 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 仅用作输入字段的初始值？ 谢谢！

解决方法

改用 defualtValue 道具。见Uncontrolled Components。

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

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

,

我已经找到了解决方案：

• created 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;