Question

正在尝试导入 angularjs 工作代码以反应redux 。

在 angularjs 中，此代码对于下拉菜单非常有效，但正在尝试使其与React Redux完全兼容。

这是我的问题，在 React Redux 中，我成功地在依赖项下拉菜单中显示了记录，但是我想要得到的是依赖（第二个下拉列表）每次选择第一个（“父级”）下拉菜单中的记录时的菜单数据

似乎fetchRecord(){}没有选择和调用任何数据

Angularjs代码

 <body ng-app='myapp'>

        <div ng-controller="fetchCtrl">

            <table>
                <tr>
                    <td>State :</td>
                    <td>
//First/Parents menu

<select  ng-model='state_send' ng-change='fetchRecords()'>
                           <option value='0'>-- Select State --</option>
                           <option value='1'>provision</option>
                           <option value='2'>chemicals</option>
                           <option value='3'>foods</option>
                           <option value='4'>sports</option>

                        </select>

                    </td>
                </tr>

                <tr>
                    <td>//Dependent/Child menu :</td>
                    <td>
                        <select >
                           <option value='0'>-- Select User --</option>
                           <option ng-repeat="user in usersList" value='{{ user.id }}' >{{ user.name }}</option>
                       </select>
                    </td>
                </tr>
            </table>

        </div>

        <!-- Script -->
        <script>
        var fetch = angular.module('myapp', []);

        fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.state_send = '0';
            // Fetch data
            $scope.fetchRecords = function(){

                $http({
                method: 'post',
                url: 'record.php',
                data: {state_send:$scope.state_send}
                }).then(function successCallback(response) {
                    $scope.usersList = response.data;
                });

            }

        }]);

        </script>

    </body>

React-Redux的部分工作代码

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

import { userActions } from '../_actions';
class RecordDropdown extends React.Component {


constructor(props) {
        super(props);


this.state = { us: 0};

this.state_send = 0;

    }

    componentDidMount() {
this.props.dispatch(userActions.getDropdown(this.state_send));

    }


fetchRecord(){
this.state_send = 0;
alert(this.state_send);
this.props.dispatch(userActions.getDropdown(this.state_send));
}

    render() {
        const { rec, recs } = this.props;

        return (
            <div style={{background:'red'}} className="well col-md-6 col-md-offset-3">

//First/Parents Menu

<select name="this.state_send" id="this.state_send" value={this.state_send} onChange={this.fetchRecord} >
                           <option value='0'>-- Select State --</option>
                           <option value='1'>provision</option>
                           <option value='2'>chemicals</option>
                           <option value='3'>foods</option>
                           <option value='4'>sports</option>

                        </select>



//Child/Dependent Menu
 {recs.items &&
                    <ul><select>
<option   value='0' >--select--</option>
                        {recs.items.map((rec, index) =>

         <option  key={rec.id}  value='{ rec.id }' >{ rec.name} { rec.id }</option>                    


                        )}

</select>  
                     </ul>
                }

                <p>
   <input type="text" className="form-control" name="this.state_send" id="this.state_send" value={this.state_send} onChange={this.handleChange} />  
                </p>
            </div>



        );
    }
}

Answer 1

我忘了按照下面的代码绑定 fetchRecord（）功能并解决了问题

this.fetchRecord = this.fetchRecord.bind(this);

动态下拉列表选择部分与React Redux一起使用

1 个答案: