How to make multiple inputs target the same source? - admin-on-rest

Question

How can I create a custom input where several inputs affect only one source?
I have a custom time input as "hours:minutes:seconds" that should save the time as seconds.
What I have so far:
// 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>
The handleChange method parses the entered value according to the name of the Field and should update the original source (in this case: "time_A"). That update is what I really can't figure out how to do.
I think the solution would be using the this.props.input.onChange but I must be doing something wrong because my this.props.input is undefined.
Any thoughts?

Answer 1

I am using the below component to capture date and time inputs from the user. You can probably use the same strategy to concatenate all your inputs.
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>
)
}
}
Below is the function to concatenate the date and time and create 1 object from it. You will probably be passing it a DD, MM, YY object and creating the date from it.
export default (date, time) => {
return new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
time.getHours(),
time.getMinutes()
)
}