Question

在html表单中，我有这个选择菜单。它就像一个用户可以在以后编辑它并更改值的配置文件。以下是呈现表单的FirstComponent代码：

export const FirstComponent = React.createClass({
    handleLanguageCode: function(langValue) {
        this.setState({
            language: langValue
        });
    },

    renderField() {
     return (
            <div>
                <SelectLanguage onSelectLanguage={this.handleLanguageCode} defValue={getValue()} /> 
            </div> 
            );           
    }
)}

如果用户想要修改表单，getValue()会将当前值发送到SelectLanguage组件。以下是此组件的代码：

import { DropdownList } from 'react-widgets';
    export const SelectLanguage = React.createClass({
        getInitialState: function(){
            return{
                value: '',
            };
        },

        handleLangChange: function (val) {
            var name = val.name
            //this.props.onSelectLanguage(val.id); //???
            //this.props.defValue(name);           //???
            //this.setState({defValue: name});    //???
            //this.state.value = defaultVal       //???
        },

        componentWillMount() {
            this.componentWillReceiveProps(this.props);
        },

        componentWillReceiveProps(props) {
            var def = this.props.defValue || 'eng';
            this.setState({value:def});
        },

        render() {
            const languages = [{"id": "eng", "name": "english"}, {"id": "swd", "name": "swedish"}] // it's a big json array!!
                return (
                    <div >
                        <DropdownList 
                            ref='dropdown'
                            data={languages} 
                            valueField='id'
                            textField={item => item.name}
                            caseSensitive={false} 
                            filter={this.filterLanguage}
                            value={this.state.value}
                            onChange={this.handleLangChange} />
                    </div>            
                );
        }
    });

问题是当用户从下拉菜单中选择一个新值时，它不会更新它！它仍然显示以前的值。我不知道如何编写handleLangChange函数来处理它。我尝试了几种方法，但无法得到结果：/任何人都可以帮我修复它吗？

Answer 1

你需要使用 this.props.onSelectLanguage（val.id）;

你也需要做绑定，所以：

onSelectLanguage={this.handleLanguageCode.bind(this)}

onChange={this.handleLangChange.bind(this)}

参考：https://facebook.github.io/react/tips/communicate-between-components.html

更新ReactJS

1 个答案: