当我使用reactjs单击输入字段时，在inputfield中选择radio下拉列表值，而不是占位符，并显示/隐藏下拉列表

我想下拉单选按钮，需要显示当我点击字段和隐藏当我点击外部，并在inputfield中获得选定的值

我需要输入字段中的选定值，而不是我在单击“输入字段”时使用“显示/隐藏”下拉列表中的占位符值

可供选择的选项
选择1
选择2
选择3

---

不确定如何使用reactjs完成此操作。

如何在React中完成此操作：

您可以将ref附加到

以从父组件访问它，然后检查

是否聚焦。如果已聚焦，则渲染单选按钮，否则不渲染

要在输入标记中显示所选选项的值，请将该值存储在组件的

状态中

，这样就很容易跟踪其值并在输入和无线电之间共享该值

此外，我还向单选输入添加了

name

属性，以便它们可以作为单选按钮正常工作

import React, { Component } from 'react';

class FormComponent extends Component {
    constructor() {
        super();
        this.state = {
            option: '',
            inputIsFocused: false
        }
    }

    handleChange = event => {
        const { value } = event.target;
        this.setState({option: value});
    }

    toggleRadio = event => {
        const { inputIsFocused } = this.state;
        this.setState({inputIsFocused: !inputIsFocused});
    }

    render() {
        const { option, inputIsFocused } = this.state;

        return (
            <div>
                <div className="inputWithIcon" id="radiobtn">
                    <input ref='input' value={ option } className="inputBlock" id="radioSelect" type="text" placeholder="choose one" onFocus={ this.toggleRadio } onFocusOut={ this.toggleRadio }/>
                    <i className="fa fa-angle-down" />
                </div>

                { inputIsFocused && (
                    <div className={ "BudgetRadioDd"} id={ "RadioDd"}>
                        <fieldset>
                            <h4>options to choose</h4>
                            <div>
                                <label><input name='option' type="radio" id="1" value="1" checked={ option === '1' } onChange={ this.handleChange }/>option 1</label>
                            </div>
                            <div>
                                <label> <input name='option' type="radio" id="2" value="2" checked={ option === '2' } onChange={ this.handleChange }/>option 2</label>
                            </div>
                            <div>
                                <label><input name='option' type="radio" id="3" value="3" checked={ option === '3' } onChange={ this.handleChange }/>option 3</label>
                            </div>
                        </fieldset>
                    </div>
                )}
            </div>
        )
    }
}

。隐藏{
显示：无；
}

可供选择的选项
选择1
选择2
选择3

我希望单选按钮位于值“选项1”之前。如何在Select？Poosapati中执行此操作？就像一个按钮显示/隐藏

？否，当我单击字段时，应显示/隐藏下拉列表，并且下拉列表中的选定值应显示在字段中而不是占位符中。。附加参考链接我的单选按钮和值在下拉列表中的外观：在问题中添加了屏幕截图是的，我知道它与Select相同，但带有Select的prblm是我们无法自定义的。我正在我的代码中尝试，现在将更新您。