Question

如何创建自定义输入，其中多个输入仅影响一个源？我有一个自定义时间输入为＆＃34;小时：分钟：秒＆＃34;应该把时间节省为秒。

到目前为止我所拥有的：

// calling the custom input with the expected source
<TimeInput source="time_A" />

// in the TimeInput component
<span>
  <Field component={NumberInput} name="hh" value={this.state.hh} onChange={this.handleChange} />
  <Field component={NumberInput} name="mm" value={this.state.mm} onChange={this.handleChange} />
  <Field component={NumberInput} name="ss" value={this.state.ss} onChange={this.handleChange} />
</span>

handleChange方法根据Field的名称解析输入的值，并应更新原始源（在这种情况下：＆＃34; time_A＆＃34;）。这个更新是我真正无法弄清楚如何做的。

我认为解决方案是使用this.props.input.onChange，但我必须做错了，因为我的this.props.input是未定义的。

有什么想法吗？

Answer 1

我使用以下组件捕获用户的日期和时间输入。您可以使用相同的策略来连接所有输入。

class DateTimePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      time: null
    };
  }
  handleDateInput = (event, date) => {
    this.setState({
      date: date
    })
  }
  handleTimeInput = (event, time) => {
    this.setState({
      time: time
    })
  }
  componentDidUpdate(prevProps, prevState) {
    const {setSchedule, channel} = this.props
    //check for state update before actually calling function otherwise permanent re-renders will happen and page will lock`
    //https://stackoverflow.com/questions/44713614/react-code-locking-in-endless-loop-no-while-loops-involved/44713764?noredirect=1#comment76410708_44713764
    if (prevState.date !== this.state.date || prevState.time !== this.state.time) {
      if (this.state.date && this.state.time) {
     setSchedule(convertISTtoUTC(concatenateDateAndTime(this.state.date, this.state.time)), channel)
      }
    }
  }
  render() {
    //id must be provided to date and time mui components - https://github.com/callemall/material-ui/issues/4659
    return (
      <div >
        </div>
          <DatePicker minDate={new Date()} id="datepick" autoOk={true} onChange={this.handleDateInput} />
          <TimePicker id="timepick" autoOk={true} pedantic={true} onChange={this.handleTimeInput} />
        </div>
      </div>
    )
  }
}

下面是连接日期和时间并从中创建1个对象的函数。您可能会传递DD，MM，YY对象并从中创建日期。

export default (date, time) => {
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate(),
    time.getHours(),
    time.getMinutes()
  )
}

如何使多个输入针对相同的源？

1 个答案: