如何在react js文本字段中同时设置默认值和值

Question

我用defaultValue对文本字段进行了反应。在defaultValue中，我使用props设置值。但我需要将onchage()事件设置为该文本字段，这样我就可以更新我的TextField值。但我不能设置它们。当我试图设置一个值时，我的默认值不会显示。

const [openingHours, setOpeningHours] = useState({
monday: '',
});

const mondayHandler = (event) => {
const temp = {...openingHours};
temp.monday = event.target.value;
setOpeningHours(temp);
};
<TextField
type="time"
defaultValue={props.times[0].time1 !== undefined ? props.times[0].time1 : '00:00'}
className={classes.textField}
InputLabelProps={{
shrink: true,
color: 'blue',
}}
InputProps={{
classes: {
underline: classes.underline,
root: classes.timeRoot,
},
}}
/>

如何将中的Onchange事件设置为此文本字段。。？

Answer 1

免责声明：我猜您正在使用material-ui的TextField组件。如果我错了，这个答案可能站不住脚。

通过使用value和onChange来控制TextField的状态，您正在创建一些人所说的"；"受控输入"；。defaultValue道具用于非受控输入，而非受控输入。相反，您可以通过向useState提供正确的初始值来设置默认值。

我的建议看起来像：

const [openingHours, setOpeningHours] = useState({
monday: '00:00',
});

const mondayHandler = (event) => {
const temp = {...openingHours};
temp.monday = event.target.value;
setOpeningHours(temp);
};
<TextField
type="time"
value={openingHours.monday}
onChange={mondayHandler}
...
/>

您必须验证00:00是否是TextField和type="time"的有效值。您可能需要提供一个Javascript日期对象。