Я использую избыточную форму и хочу, чтобы значения были вставлены пользователем при редактировании формы. С другим вводом у меня нет никаких проблем, только с выпадающим списком (выберите компонент).
Я использую компонент класса с именем ServiceForm, который находится внутри функционального компонента с именем renderTodos. Раскрывающийся список «relatedTodos» возвращает мне все задачи от api rest.
Это мой компонент класса:
componentWillReceiveProps = nextProps => {
// Load Contact Asynchronously
const { service } = nextProps;
if (service._id !== this.props.service._id) {
// Initialize form only once
this.props.initialize(service);
this.isUpdating = true;
}
};
componentDidMount(){
this.props.searchTodos();
}
constructor(props){
super(props);
this.state = {
//LOOK THE FOLLOWING LINE PLEASE
todo: props.todo.name};
};
onChange = (e) =>{
this.setState({
todo: e.target.value
})
}
renderArrayTodos = ({fields, meta: { error,submitFailed}},input) => (
<dl>
<dt>
<button type="button" className='btn btn-primary' style=
{{fontWeight:'bold',color:'black'}} onClick={() =>
fields.push()}>Add todo</button>
{submitFailed && error && <span>{error}</span>}
</dt>
{ fields.map((relatedTodo, index) =>
<dd key={index}>
<br></br>
<button className='btn btn-primary' style={{fontWeight:'bold',color:'black'}}
type="button"
title="Remove Todo"
onClick={() => { fields && fields.remove(index)
}}> Remove </button>
<h4><b>Todo's widget number {index + 1}</b></h4>
<div className="row" style={
{textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
}}>
<label style={{fontStyle:
'arial',fontWeight:'bold',fontSize:17}}>Todo:</label>
<Field
className="custom-select d-block w-100" name={`${relatedTodo}`}
value={this.state.todo} onChange={this.onChange.bind(this)}
component="select" placeholder={!input.value ? 'Please, insert a todo' : input.value}>
{/* <option value="" hidden style={{fontStyle:
'arial',fontWeight:'bold'}}>Please, select a todo</option> */}
{/*PLACEHOLDER FOR TODO SELECT IN SERVICE FORM: Please, select a todo
when I'm CREATING a service,ON THE CONTRARY when I'm EDITING a service,
the placeholder will be the reflected todo value I inserted when I
created the service. e.g. I inserted todo 5, when I'm EDITING the
created service, only todo I inserted should be showed like todo 5. */}
<option value={input.value} hidden style={{fontStyle:
'arial',fontWeight:'bold'}}>{!input.value ? 'Please, select a todo'
: input.value}</option>
{ this.props.todoList.map(todo => {
return(
<option key={todo._id} value={todo._id} style={{fontStyle:
'arial',fontWeight:'bold'}} >{todo.name}</option>
)
})}
</Field>
</div>
</dd>
)
}
{error && <dt className="error">{error}</dt>}
</dl>
);
Здесь я соединяю действие под названием "searchTodos и todoList (reducer)" с api:
const actions = {
searchTodos
};
function mapState(state){
return {
todoList: state.todosSoftware.todoList
}
}
ServiceForm= connect(mapState,actions)(ServiceForm);
Раскрывающийся список, называемый «relatedTodos», и это todos в следующем порядке: «todo 1, todo 2, todo 3, todo 4, todo 5».
Когда я Создаю сервис
e.g.
Я помогаю своему сервису, нажимаю на кнопку «добавить задачу». Добавьте поле с именем ${relatedTodo}. Я выбираю
e.g.
todo 5.
Когда я редактирую созданный сервис только с одним назначенным todo, заполнитель Dropdown должен сказать "todo 5" not ", пожалуйста, выберите todo" или первый элемент раскрывающегося списка, который называется «todo 1».
С другой стороны, когда я редактирую сервис, у меня появляется эта ошибка: «не могу прочитать имя undefined». Эта ошибка находится в следующей строке кода.
constructor(props){
super(props);
this.state = {
//IN THE FOLLOWING LINE IS THE ERROR
todo: props.name.todo
}
}
При редактировании службы в форме службы значения выбора отражают значения, введенные пользователем.