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

Question

我想要下拉单选按钮，当我点击字段时需要显示，当我点击外面并在输入字段中获取所选值时隐藏。

我需要输入字段中的选定值而不是我所拥有的占位符值以及单击输入字段时显示/隐藏下拉列表

<div className="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
  <input className="inputBlock" id="radioSelect" type="text" placeholder="choose one" />
  <i className="fa fa-angle-down" />
</div>

<div className={ "BudgetRadioDd"} id={ "RadioDd"} style={{display: 'none'}}>
  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label><input type="radio" id="1"/>option 1</label>
    </div>
    <div>
      <label> <input type="radio" id="2" />option 2</label>
    </div>
    <div>
      <label><input type="radio" id="3"/>option 3</label>
    </div>

  </fieldset>

</div>

不知道如何使用reactjs完成这项工作。

Answer 1

如何在React中执行此操作：

您可以将引用附加到<input>以从父组件访问它，然后检查<input>是否已聚焦。如果它是聚焦渲染单选按钮，否则不。

要在输入标记中显示所选选项的值，请将该值存储在组件的state中，然后很容易跟踪其值并在输入和无线电之间共享该值。

此外，我已将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>
        )
    }
}

关于上述内容的说明：我认为onFocusOut存在问题，因此实际上并没有被解雇。另外值得注意的是，inputIsFocused中使用的render值不是来自state的值。这是因为onFocusOut的问题因此inputIsFocused的值需要来自引用DOM，但是为了触发重新呈现，组件的state需要更新。

这是一个片段，用于显示它的外观（请注意，当选择按钮时，代码段中的值不会更新，但React代码中存在该功能）：

function hideRadio() {
    const radioDd = document.querySelector('.BudgetRadioDd');
    radioDd.classList.add('hidden');
}

function showRadio() {
    const radioDd = document.querySelector('.BudgetRadioDd');
    radioDd.classList.remove('hidden');
}

.hidden {
  display: none;
 }

<div class="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
  <input class="inputBlock" id="radioSelect" type="text" placeholder="choose one" onfocus="showRadio();" onfocusout="hideRadio();"/>
  <i className="fa fa-angle-down" />
</div>

<div class="BudgetRadioDd hidden" id="RadioDd">
  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label><input name='attributeName' type="radio" id="1"/>option 1</label>
    </div>
    <div>
      <label> <input name='attributeName' type="radio" id="2" />option 2</label>
    </div>
    <div>
      <label><input name='attributeName' type="radio" id="3"/>option 3</label>
    </div>

  </fieldset>

</div>

然而，这似乎几乎是<select>的功能，所以也许考虑使用其中之一？