Question

我们正在开发一个我们正在使用框的项目，当用户从列表中选择一个项目时，需要其中一个选择框来执行操作。这是我们第一次接触React，更不用说建立一个项目，所以我们在这一点上很难过。我们用于onChange代码的内容如下：

    var React = require('react');
    var ReactPropTypes = React.PropTypes;

    var ProgramSelectorComponent = React.createClass({

         propTypes: {
            allPrograms: ReactPropTypes.array.isRequired
          },

        _updateProgram: function(e) {
            this.setState({
                value: "TEST"
            });

        },
        render() {
            var Programs = this.props.allPrograms;
            var options = Programs.map(function (prog) {
                return <option key={ prog.program_id } value={ prog.program_id } >
                    { prog.program_name }
                </option>;

            });


            return (
                <select className="form-control margin-bottom" name="Program" id="programSelect" ref="progRef" onChange={this._updateProgram} >
                    <option value="select">Select</option>
                   {options}
                </select>
            )
        }


    });

    module.exports = ProgramSelectorComponent;

我知道渲染在<select>标记中有效，因为我可以添加类似data-test-id="test"的内容并且渲染正确，但由于某种原因，onChange未在代码中显示，因此，不工作。

就像我说的那样，我们都是新手，所以任何帮助都会非常感激。

Answer 1

在您的选择标记中尝试：<select value={this.state.value}>

这是关于受控组件和非受控组件的好读物：https://facebook.github.io/react/docs/forms.html

onChange不在React中呈现

1 个答案: