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>的功能，所以也许考虑使用其中之一？

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

1 个答案: