React中的按钮中未显示所选的下拉列表值

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

它在render中生成下拉列表而不是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>
        )
    }
}