javascript - 从具有多个按钮的模态返回一个值( react )

Question

假设我有以下 UI:

我单击输入字段并打开一个模式，我可以在其中选择多个选项(本质上是一个花哨的下拉菜单)。

使用普通的 Javascript，我会做类似的事情:

<button id="show">Show</button>
<div id="popup">
    Please choose
    <button id="option1">1</button>
    <button id="option2">2</button>
    <button id="option3">3</button>
    <button id="option4">Little</button>
    <button id="option5">A lot</button>
    <button id="option6">A few</button>
</div>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#popup').hide();
$('#show').click(function() {
    openPopup()
        .then(function(data) {
            $('#result').html("You pressed " + data)
            closePopup();
        })
})
function openPopup() {
    return new Promise(function(resolve, reject) {
        $('#popup').show();
        $('#option1').click(function() { resolve('"1"') })
        $('#option2').click(function() { resolve('"2"') })
        $('#option3').click(function() { resolve('"3"') })
        $('#option4').click(function() { resolve('"Little"') })
        $('#option5').click(function() { resolve('"A lot"') })
        $('#option6').click(function() { resolve('"A few"') })
    });
}
function closePopup() {
    $('#popup').hide();
}
</script>

当前 React 代码:

到目前为止我的 react 代码是(去掉了无聊的部分):

function Modal(){
    return (
        <div>
            <div>
                <UnitBlock name="1" />
                <UnitBlock name="2" />
                <UnitBlock name="3" />
                <UnitBlock name="4" />
                <UnitBlock name="5" />
            </div>
            <div>
                <UnitBlock name="Little" />
                <UnitBlock name="A lot" />
                <UnitBlock name="A few" />
            </div>
        </div>
        )
}

function UnitBlock(props) {
  return <div className="UnitBlock">{props.name}</div>
}

function FakeInputField(props){
    return <div className="FakeInputField">{props.name}</div>   
}

function example(){
    return(
        <div>
            <FakeInputField name="Amount"/>
            <Modal/>
        </div>
    )
}

所以我的基本问题是:如何通过单击模式中的按钮之一将值返回到(假)输入字段？

就像在 promises 的例子中，我试图创建一些简单的东西，比如“与输入字段交互打开模式，然后你点击的按钮发送它的信息到输入字段”。

Answer 1

我最终使用了:

class Parent extends React.Component{
    useDataFromChild = (value) => {
        console.log(value)
    }

    render() {
         return (
                <div>
                    <Child name="Option: Little" onReceiveData={this.useDataFromChild}/>
                    <Child name="Option: Many" onReceiveData={this.useDataFromChild}/>
                </div>
        )
     }
}

class Child extends React.Component {
    sendData = () => {
        this.props.onReceiveData(this.props);            
    }

    render() {
        return (
            <div >
                <div onClick={this.sendData}>{this.props.name}</div>
            </div>            
        );
    }
}

ReactDOM.render(<Parent/>, document.getElementById('root'));

但显然React Redux是解决这些问题的方法。