datepicker を使用してプロジェクトを追加すると機能しますが、datepicker を使用してそれらのプロジェクトを編集/更新しようとすると機能しません! 次のような多くのエラーが表示されます。
失敗したプロップ タイプ:に指定された
selectedタイプのプロップが無効であることが予想されますstringDatePickerobjectコンポーネントは、タイプ テキストの制御されていない入力を制御されるように変更しています。入力要素は、制御されていない状態から制御されている状態 (またはその逆) に切り替えるべきではありません。コンポーネントの寿命の間、制御された入力要素を使用するか、制御されていない入力要素を使用するかを決定します。
失敗したプロップ タイプ:に指定された
selectedタイプのプロップが無効であると予想されます。stringCalendar/Month/Week/Dayobjectキャッチされていない TypeError: 未定義のプロパティ '値' を読み取ることができません
入力が空で、本来のように今日の日付が表示されません。例を次に示します。
ここに私の EditProject コンポーネントがあります:
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import './EditProject.css';
import 'react-datepicker/dist/react-datepicker.css';
class EditProject extends Component {
constructor(props) {
super(props);
this.state = {
project: {}
}
}
componentDidMount() {
// console.log('PROPS ' + JSON.stringify(this.props));
const { match: { params } } = this.props;
fetch(`/dashboard/project/${params.id}/edit`)
.then(response => {
return response.json()
}).then(project => {
this.setState({
projectname: project.projectname,
typeofproject: project.typeofproject,
imageURL: project.imageURL,
startDate: project.startDate,
endDate: project.endDate
})
})
}
render() {
const { match: { params } } = this.props;
return (
<div className='EditProject'>
<h1 className='EditProject__title'>Edit</h1><h1 className='EditProject__projectname'>{this.state.projectname}</h1>
<hr />
<form method='POST' action={`/dashboard/project/${params.id}/edit?_method=PUT`}>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Project Name</span>
</div>
<input type='text' className='form-control input' placeholder='insert new project name' value={this.state.projectname} name='projectname' ref='projectname' onChange={(event) => this.setState({ projectname: event.target.value })} />
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Type of Production</span>
</div>
<select className='form-control input' value={this.state.typeofproject} name='typeofproject' ref='typeofproject' onChange={(event) => this.setState({ typeofproject: event.target.value })}>
<option value='Film (Cinema)'>Film (Cinema)</option>
<option value='Film (TV)'>Film (TV)</option>
<option value='Film (series)'>Film (series)</option>
<option value='Short film'>Short film</option>
<option value='TV mini-series'>TV mini-series</option>
<option value='TV series'>TV series</option>
<option value='TV program'>TV program</option>
<option value='TV reporting'>TV reporting</option>
<option value='Vox Pop'>Vox Pop</option>
<option value='Advertisement Ad'>Advertisement Ad</option>
<option value='Documentary'>Documentary</option>
<option value='Documentary (TV)'>Documentary (TV)</option>
<option value='Documentary (series)'>Documentary (series)</option>
<option value='Commercial'>Commercial</option>
<option value='Video Clip'>Video Clip</option>
<option value='Live Video Clip TV'>Live Video Clip TV</option>
<option value='Photography Session'>Photography Session</option>
</select>
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Start Date</span>
</div>
// ================DATEPICKER HERE================
<DatePicker
todayButton={"Today"}
dateFormat="DD/MM/YYYY"
selected={this.state.startDate}
value={this.state.startDate}
onChange={(event) => this.setState({ startDate: event.target.value })}
/>
</div>
</div>
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">End Date</span>
</div>
<DatePicker
todayButton={"Today"}
dateFormat="DD/MM/YYYY"
selected={this.state.endDate}
value={this.state.endDate}
onChange={(event) => this.setState({ endDate: event.target.value })}
/>
</div>
</div>
// / ================DATEPICKER HERE================
<div className='form-group container'>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" style={{border:'none'}} id="basic-addon1">Project Image URL</span>
</div>
<input type='text' className='form-control input 'placeholder='insert new project image URL' value={this.state.imageURL} name='imageURL' ref='imageURL' onChange={(event) => this.setState({ imageURL: event.target.value })} />
</div>
</div>
<div className='form-group container'>
<button type='submit' className='btn btn-default button--update'>Update</button>
<NavLink to={`/project/${params.id}/`} ><button type='submit' style={{ backgroundColor: '#b5b5b5' }} className='btn btn-default button--update'>Cancel</button></NavLink>
</div>
</form>
</div>
);
}
}
export default EditProject;
手伝ってくれてどうもありがとう！