Question

使用此命令：https://codesandbox.io/s/5154qzmjl作为用户界面时间选择器的示例，由于无法更改时间值，现在遇到了麻烦。

我正在将状态中的days数组映射到TextField：

this.state = {
    days: [
                { day: 0, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 1, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 2, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 3, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 4, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 5, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 6, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
            ],
}


render() {
        const {
            days,
        } = this.state;

    return (
        <div>
            {
                    days.map((e, index) => (
                        <Card
                            key={e.day}
                            className={classes.card}>
                            <CardContent>
                                <TextField
                                    id="time"
                                    label="From Time"
                                    type="time"
                                    value={e.fromHour.toString().padStart(2, '0') + ":" + e.fromMin.toString().padStart(2, '0')}
                                    inputProps={{
                                        step: 300, // 5 min
                                    }}
                                />
                            </CardContent>
                        </Card>
                    ))}
        </div>
    );
}

请注意句柄时间函数，必须转换为字符串才能进行渲染。但是，这些值将固定在我在状态中定义的值上。如何更改它们？感谢您的帮助。

Answer 1

根据Material-ui文档，textfied的value属性接受以下内容：

union: string |
 number |
 bool |
 arrayOf

因此您的函数不求值

Answer 2

您需要阅读受控组件：https://reactjs.org/docs/forms.html

文本字段的值由您使用的状态变量控制。当您尝试更改输入的值时，它不会更新，因为状态变量不会更新。您需要在文本字段中添加一个更改事件处理程序，并在输入更改时更新状态值。链接中的相关代码：

  handleChange(event) {
    this.setState({value: event.target.value});
  }

在您的情况下，您必须将值解析为小时和分钟，以分别设置它们。您还需要传递日期编号，以便可以更新数组中的正确元素。您可能需要重新考虑您的状态结构，并且以天为键的对象可能比现在的数组更容易更新。

Answer 3

Burhan B是对的。在您的TextField组件中添加一个onChange道具。将值设置为this.state.value或value，因为您已经破坏了状态。

伪代码

state = {
  days: [...], //your objects go here just omitted for the sake of space
  time: moment().format("insert your format") }
  ...
handleChange = time => {
  this.setState({ time }) 
}
render(){
  const { days, time } = this.state; 
  return (
   <div> ...
    <TextField
     id="time"
     label="From Time"
     type="time"
     value={time}
     onChange = {this.handleChange}
     inputProps={{
       step: 300, // 5 min
     }}
   />

moment（）。format来自MomentJS。 MomentJS是处理日期和时间的软件包。或者，您可以使用Date-fns。我建议使用此方法，因为它看起来像您正在手动尝试在值属性中设置日期格式，但我不确定这是最好的方法。这些软件包带有格式设置并返回ISODate。格式用于前端，而ISODate对后端有用（假设您将其发送到数据库）。

当然，您不必使用任何一个软件包。如果您可能没有其他为您格式化时间的组件，或者没有格式化时间的函数。这使代码更具可读性，更易于更新。

希望有帮助。

材质UI TexField输入时间选择器不会更改值

3 个答案: