如何使用react redux在下拉列表中显示记录

时间:2018-11-08 19:32:52

标签: reactjs redux

使用以下代码在reaxt redux中显示记录,一切正常。现在我想在显示结果 下拉,如下面的代码所示,但无法使其正常工作。

    <select name="form-field-name" value={user.firstName} onChange={this.handleChange}/>
<option value="{user.id}">  {user.firstName + ' ' + user.lastName}  </option></select>

这是主要代码

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { dropdownActions } from '../_actions';

class DropdownApp extends React.Component {

constructor(props) {
        super(props);

this.state = {
            us: 0

        };


    }

    componentDidMount() {
this.props.dispatch(userActions.DropdownRecords());
    }

    handleDeleteUser(id) {
        return (e) => this.props.dispatch(userActions.delete(id));
    }


    render() {
        const { user, users } = this.props;
        return (
            <div style={{background:'green'}} className="well col-md-6 col-md-offset-3">




   {users.items &&
                    <ul>
                        {users.items.map((user, index) =>
                            <li key={user.id}>

 /*

         <select name="form-field-name" value={user.firstName} onChange={this.handleChange}/>
<option value="{user.id}">  {user.firstName + ' ' + user.lastName}  </option></select>

*/


                                {user.firstName + ' ' + user.lastName}  

</li>                      

                        )}

                    </ul>
                }
                <p>

hello

                </p>


            </div>



        );
    }
}

1 个答案:

答案 0 :(得分:0)

这就是我能够解决的方式

                    <select>
<option   value='' >--select--</option>
                        {users.items.map((user, index) =>



         <option  key={user.id}  value='{ user.id }' >{ user.lastName}</option>

                        )}

</select>