问题描述
我正在尝试使用从 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;