2017-11-07 19 views
0

私は反応が新しいです。私は使用が必要react-datepickerReact Datepicker(入力値を取得できません)

私は日付を変更すると、入力の価値を得たいです。 2017年10月20日をクリックすると、2017年10月20日を変数にしたいと思います。 しかし、私は入力ではなく、コンポーネントで作業する必要がある主な問題。

私はちょうど状態から値を取った。 this.state.valueのように。しかし、今はそれが状態のオブジェクト(瞬間)です。このオブジェクトには値フィールドはありません。

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

答えて

2

はただ、これを使用する:

は私のコードがあります!詳細については

はmoment.jsドキュメントに目を向ける - あなたは(ユーザーが日付ピッカーから新しい日付をクリック後に)新しい値を取得したい場合はhttps://momentjs.com/docs/

0

方法にイベントを渡します。

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} /> 
    ... 
    } 
}; 
関連する問題