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

Question

使用这个：https://codesandbox.io/s/5154qzmjl作为材料UI时间选择器的一个例子，现在遇到麻烦，因为我无法改变时间的价值。

我将状态中的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文档，text字段的value属性接受以下内容：

union: string |
 number |
 bool |
 arrayOf

所以你的功能没有评估

Answer 2

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

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

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

在您的情况下，您必须将值解析为小时和分钟以单独设置它们。您还需要传递日期编号，以便更新阵列中的正确元素。您可能想要重新考虑您的状态结构，并使用日期编号对象，因为密钥可能比您现在拥有的数组更容易更新。

Answer 3

Burhan B是对的。在TextField组件中添加onChange prop。将值设置为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（）。格式来自MomentJS。 MomentJS是处理日期和时间的包。或者，您可以使用Date-fns。我建议使用这个，因为看起来你手动尝试在价值道具中格式化日期，我不确定这是最好的方法。这些包带有格式并返回ISODate。格式化用于前端，ISODate对后端很有用（假设您将其发送到数据库）。

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

希望有所帮助。