问题
I need to get the value from Client Form I inserted. e.g
nationalities:["english","french","american"]
The expected output is for example, I selected american, then I see american in nationality dropdown field when I'm editing client form.
But the actual result is the first element from the dropdown is always selected, english in this case.
I need to access the selected value from dropdown when I'm editing the client form. This is my code:
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);
Maybe I'm not using the dropdown called nationality correctly whose component is called renderNationalities.
How can I fix this issue?, All I want is when I insert a value in dropdown I see when I'm creating client, dropdown show "please, insert a nationality" and when I'm editing client I've created on client form the dropdown shows the nationality I've inserted not the first of the reducer list.
Nationalities is the reducer.
How can I solve this issue? Any solution over here?
来源：https://stackoverflow.com/questions/60478237/get-selected-value-i-inserted-to-dropdown-when-im-editing-the-client-form