Мне нужно получить значение из формы клиента, которую я вставил. например,
nationalities:["english","french","american"]
Ожидаемый вывод, например, я выбрал американский, затем при редактировании формы клиента я вижу американца в раскрывающемся поле национальности.
Но фактический результат - первый элемент из раскрывающегося списка всегда выбран, в данном случае engli sh.
Мне нужно получить доступ к выбранному значению из раскрывающегося списка при редактировании формы клиента. Это мой код:
componentWillReceiveProps = nextProps =>
{
// Load Contact Asynchronously
const
{
client
} = nextProps;
if (client._id !== this.props.client._id)
{
// Initialize form only once
this.props.initialize(client);
this.isUpdating = true;
}
};
componentDidMount()
{
this.props.searchNationalitiesToInsertClient();
}
constructor(props)
{
super(props);
this.state = {
nacionality: ''
};
}
onChange = (e) =>
{
this.setState(
{
nacionality: e.target.value
})
}
renderNacionalities = (
{
meta:
{
error
},
input
}) =>
{
return ( <
div className = "col-md-4 mb-3" >
<
label > Nacionality: < /label>
<
Field className = "custom-select d-block w-100"
name = "nacionality"
value = {
this.state.nacionality
}
onChange = {
this.onChange.bind(this)
}
component = "select"
placeholder = {
!input.value ? 'Please, insert a
nationality ' : input.value}>
{
this.props.nationalities.map(nacionality =>
{
return ( <
option key = {
nacionality._id
}
value = {
nacionality._id
} >
{
nacionality.country
} < /option>
)
})
}
<
/Field>
{
error && < p className = "error" >
{
error
} < /p>}
<
/div>
);
}
render()
{
const
{
handleSubmit,
loading,
pristine,
reset,
submitting
} = this.props;
if (loading)
{
return <span > Loading... < /span>;
}
return ( <
form onSubmit = {
handleSubmit
} >
<
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Field name = 'name'
type = 'text'
component = {
TextField
}
placeholder = '...Name'
label = 'Name' /
>
<
Field name = 'email'
type = 'text'
component = {
TextField
}
placeholder = '...Email'
label = 'Email' /
>
<
Field name = 'cuil'
type = 'text'
component = {
RenderField
}
placeholder = '...Cuil'
label = 'Cuil' /
>
<
/div> <
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Field name = 'phoneNumber'
type = 'number'
component = {
RenderFieldNumeric
}
placeholder = '...PhoneNumber'
label = 'PhoneNumber' /
>
<
/div> <
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Field name = 'nacionality'
component = {
this.renderNacionalities
}
placeholder = '...nacionality'
label = 'Nacionality' /
>
<
/div>
<
div style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} > < b > Direction < /b></div >
<
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Field name = 'direction.street'
type = 'text'
component = {
TextField
}
placeholder = '...Street'
label = 'street' /
>
<
Field name = 'direction.number'
type = 'number'
component = {
RenderFieldNumeric
}
placeholder = '...Number'
label = 'number' /
>
<
/div> <
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Field name = 'direction.floor'
type = 'text'
component = {
TextField
}
placeholder = '...Floor'
label = 'floor' /
>
<
Field name = 'direction.department'
type = 'text'
component = {
RenderField
}
placeholder = '...Department'
label = 'departament' /
>
<
/div> <
div className = 'row'
style = {
{
textAlign: 'center',
justifyContent: 'center',
paddingRight: 20,
margin: '10 10px 10 10px'
// alignItems: 'center',
}
} >
<
Link className = 'btn btn-light mr-2'
to = '/clients' >
Cancel <
/Link> <
button className = 'btn btn-primary mr-2'
type = 'submit' >
{
this.isUpdating ? 'Updating' : 'Creating'
} <
/button> <
/div> <
/form>
);
}
}
function mapState(state)
{
return {
nationalities: state.nacionalitiesDs.nationalities
}
}
const actions = {
searchNationalitiesToInsertClient
};
ClientForm = connect(mapState, actions)(ClientForm);
export default reduxForm(
{
form: 'client',
validate: validations
})
(ClientForm);
Возможно, я не правильно использую раскрывающийся список под названием национальность, компонент которого называется renderNationalities.
Как я могу исправить эту проблему? Все, что я хочу, это когда Я вставляю значение в раскрывающемся меню, которое вижу при создании клиента, в раскрывающемся списке отображается «пожалуйста, укажите национальность», а при редактировании клиента, созданного в форме клиента, в раскрывающемся списке отображается не первая национальность, которую я вставил. из списка редукторов.
Национальности - это редукторы.
Как я могу решить эту проблему? Любое решение здесь?