Question

我有一个Bootstrap下拉菜单，当选择了下拉菜单项时，我正在使用setState将选定项的值设置为dataTypeName并将其显示在按钮中，以显示他/她选择了哪个项目。但是由于某种原因，它无法正常工作。

我正在componentDidMount()中生成下拉列表，并在处理程序函数中执行setState。是因为在componentDidMount()中生成了按钮，这就是为什么该值不显示的原因？

以下是功能

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    showDataTypeName = (paramName, dataTypeId, dataTypeName) => {
        this.props.handleDataTypes(paramName, dataTypeId, dataTypeName);
        this.setState({
            dataTypeName: dataTypeName
        });
    }

    componentDidMount(){
        let content = this.state.rows.slice();    
        this.props.params.map((d, i) => {
            let dataTypes = [];
            if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
                this.props.apiPropertiesSuccess.map((type, i) => {
                    dataTypes.push(<li key={type.get('id')}><a onClick = {() => this.showDataTypeName(d.paramName, type.get('id'), type.get('name'))}> {type.get('name')} </a></li>)
                });
            }
            content.push(<div key={d.paramId}>
                <div className="col-md-6">
                    <TextInput size="medium" id={d.paramId} value={d.paramName} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        });

        this.setState({rows:content})
    }

    render(){
        console.log("dataTypeName", this.state.dataTypeName)
        return(
            <div>
                {this.state.rows}
            </div>
        )
    }
}

Answer 1

在渲染器中生成下拉列表而不是componentDidMount后，它可以正常工作。

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    showDataTypeName = (paramName, dataTypeId, dataTypeName) => {
        this.props.handleDataTypes(paramName, dataTypeId, dataTypeName);
        this.setState({
            dataTypeName: dataTypeName
        });
    }

    render(){
        let content = this.state.rows.slice();    
        this.props.params.map((d, i) => {
            let dataTypes = [];
            if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
                this.props.apiPropertiesSuccess.map((type, i) => {
                    dataTypes.push(<li key={type.get('id')}><a onClick = {() => this.showDataTypeName(d.paramName, type.get('id'), type.get('name'))}> {type.get('name')} </a></li>)
                });
            }
            content.push(<div key={d.paramId}>
                <div className="col-md-6">
                    <TextInput size="medium" id={d.paramId} value={d.paramName} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        });
        return(
            <div>
                {content}
            </div>
        )
    }
}

选定的下拉值未显示在React中的按钮中

1 个答案: