複数の入力を同じソースをターゲットにする方法は？

Question

複数の入力が1つのソースにしか影響しないカスタム入力を作成するにはどうすればよいですか？ 私は時間を秒として保存する "時間：分：秒"というカスタム時間入力があります。

私がこれまで持っているもの：

// 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方法は、フィールドの名前に応じて入力された値を解析し、（この場合は：「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` 
    //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() 
) 
}