2017-11-07 7 views
0

나는 반응이 새로운 것입니다. 사용이 필요합니다 react-datepickerReact Datepicker (입력 값을 얻을 수 없음)

날짜를 변경할 때 입력 값을 얻고 싶습니다. 2017 년 10 월 20 일을 클릭하면 2017 년 10 월 20 일을 내 변수에 넣고 싶습니다. 하지만 입력 문제가 아니라 구성 요소와 관련된 주요 문제가 있습니다.

방금 ​​전 상태에서 가치를 얻었습니다. 이렇게. 스테이트. 값. 하지만 지금은 국가의 목표 (순간)입니다. 그리고이 객체에는 값 필드가 없습니다.

handleChange = date => { 
    const valueOfInput = date.format(); 
    ///... 
}; 

을이 moment.js 개체를 반환 datepicket 때문에 -

export default class DatePicker extends Component { 
constructor (props) { 
    super(props); 
    // this.props.date should looks like "29 November 2017 00:00" 
    // second argument for moment() it is format of date, because RFC 2822 date time format 
    this.state = { 
     date: moment(this.props.value, 'LLL') 
    }; 
} 
handleChange = (date) => { 
    // const valueOfInput = this.state.date <--- I want string with date here 
    console.log('this.state.date',this.state.date); 
    this.setState({date: date}); 
}; 
render() { 
    return <Form.Field> 
       <Label> 
       <Picker 
        selected={this.state.date} 
        onChange={this.handleChange} 
        dateFormat="LLL" 
        locale={this.props.language} 
       /> 
       </Label> 
      </Form.Field> 

enter image description here

답변

0

당신이 (사용자가 DatePicker에서의 새로운 날짜를 클릭하면) 새 값을 얻는 방법에 이벤트를 전달합니다.

class MyComponent extends React.Component { 
    constructor(props) { 
    this.state = {inputValue: moment(),} // this will set the initial date to "today", 
             // you could also put another prop.state value there 
    this.handleChange = this.handleChange.bind(this); 
    } 
    } 


    handleChange(value) { 
    console.log(value); // this will be a moment date object 
    // now you can put this value into state 
    this.setState({inputValue: value}); 
    } 

    render(){ 
    ... 
    <DatePicker 
     onChange={(event) => this.handleChange(event)} 
     selected={this.state.inputValue} otherProps={here} /> 
    ... 
    } 
};