여러 입력을 동일한 소스로 타겟팅하는 방법은 무엇입니까?

Question

여러 입력이 하나의 소스에만 영향을주는 사용자 입력을 만들려면 어떻게해야합니까? 시간을 초로 저장해야하는 "시간 : 분 : 초"로 사용자 정의 시간 입력이 있습니다.

// 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> 
    ) 
    } 
} 

다음은 날짜와 시간을 연결하여 하나의 개체를 만드는 기능입니다. DD, MM, YY 개체를 전달하고 날짜를 생성하는 것이 좋습니다.

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