Question

我有一个控制所有状态的父组件和一个子组件，它返回一个下拉菜单并传递（应该传递，而不是）将选项单击到父组件并更新父组件的结果。状态。

家长：

// We're controlling all of our state here and using children
// components only to return lists and handle AJAX calls.

import React, { Component } from 'react';
import SubList from './SubList';
import StopList from './StopList';

class SubCheck extends Component {

  constructor (props) {
    super(props);
    this.state = {
        selectedSub: null,
        selectedStop: null,
        stops: [],
    };
    this.handleSubSelect.bind(this);
    this.handleStopSelect.bind(this);
    }

    // We want the user to be able to select their specific subway
    // stop, so obviously a different array of stops needs to be 
    // loaded for each subway. We're getting those from utils/stops.json.
    handleSubSelect(event) {
        var stopData = require('../utils/stops');
        var stopsArray = [];
        for (var i = 0; i < stopData.length; i++) {
            var stop = stopData[i];

            if (stop.stop_id.charAt(0) == event.target.onSubSelect) {
                stopsArray.push(stop.stop_name);
            }
        }
        this.setState(() => {
            console.log('setting state');
            return {
                selectedSub: event.target.onSubSelect,
                stops: stopsArray
            }
        });
    }

    handleStopSelect(event) {
        this.setState({selectedStop: event.target.onStopSelect});
    }

    render() {
        return (
            <div>
                <SubList onSubSelect={this.handleSubSelect.bind(this)}/>
                <StopList stops={this.state.stops} onStopSelect={this.handleStopSelect.bind(this)}/>
            </div>
        );
    }
}

export default SubCheck;

子：

import React from 'react';
import PropTypes from 'prop-types';

function SubList (props) {
    const subways = ['', '1', '2', '3', '4', '5', '6', 
    'S', 'C', 'B', 'D', 'N', 'Q', 'R', 'L']
    return (
        <select>
            {
                subways.map(subway =>
                    <option key={subway} onClick={() => props.onSubSelect(subway)}>
                        {subway}
                    </option>
                )
            }
        </select>
    )
}
SubList.PropTypes = {
    onSubSelect: React.PropTypes.func.isRequired
};

export default SubList;

当我按原样打开应用程序并从下拉菜单中选择一个选项时，我预计会发生两件事情。一个是第二个菜单（StopList返回的菜单，此处未包含的代码）未填充任何数据。第二件事是设置状态＆＃39;未记录到控制台。第二件事让我相信在我的代码中的某个地方，我没有正确地将下拉选项中的选项传递给我的handleSubSelect方法，因此没有正确设置任何新状态。

Answer 1

你已经完成了绑定，所以你不需要它，事实上当用户改变选择时你所做的只是做绑定

所以改变这一行

<SubList onSubSelect={this.handleSubSelect.bind(this)}/>

到这个

<SubList onSubSelect={this.handleSubSelect}/>

世界应该更快乐。

onStopSelect

存在同样的问题

<强>更新

在handleSubSelect()方法中执行此操作：

   this.setState(() => {
        console.log('setting state');
        return {
            selectedSub: event.target.onSubSelect,
            stops: stopsArray
        }
    });

看起来有些混乱，我认为应该是这样的：

   console.log('setting state');
   this.setState({
            selectedSub: event.target.onSubSelect,
            stops: stopsArray
        }
    );

Answer 2

您应该将方法绑定为：

>>> pos = [[0.2,0.0],[0.1,1]]
>>> pos[0]
[0.2, 0.0]
>>> pos[0][0]
0.2
>>> pos[0][0]+ 3.3
3.5

与here相同。当然，将元素更改为：

 this.handleStopSelect = this.handleStopSelect.bind(this);

也代替 event.target.onSubSelect 你能试试 event.target.value

吗？

Answer 3

您需要在select元素上使用onChange处理程序：

<select onChange={props.onSubSelect}>

您的onSubSelect处理程序将收到一个事件，您需要从event.target.value获取所选值。

参见文档：

https://facebook.github.io/react/docs/forms.html#the-select-tag

React下拉菜单未设置状态

3 个答案: