如何使多个输入指向同一个源？

Question

如何创建多个输入仅影响一个源的自定义输入？我有一个自定义时间输入 "hours:minutes:seconds" 应该将时间保存为秒。

我目前拥有的：

// 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 的名称解析输入的值，并应更新原始来源（在本例中："time_A"）。那个更新是我真的不知道该怎么做。

我认为解决方案是使用 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`
    //
    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()
  )
}

如何使多个输入指向同一个源？

How to make multiple inputs target the same source?

admin-on-rest