Вернуть значение из модального с несколькими кнопками (React) - PullRequest
Новая
       11

Вернуть значение из модального с несколькими кнопками (React)

0 голосов
/ 29 мая 2018

Представьте, что у меня есть следующий пользовательский интерфейс:

enter image description here

Я щелкаю поле ввода, и открывается модальное окно, где я могу выбирать между несколькими вариантами (по сути,необычно выпадающий список).

С обычным 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>

Текущий код реакции:

Мой код реакции пока (с скучными частями)убрали): 

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>
    )
}

Итак, мой основной вопрос: как я могу вернуть значение в (поддельное) поле ввода, нажав одну из кнопок в модальном режиме?

Мне нравитсяв примере с обещаниями я попытался создать что-то простое, например: «Взаимодействие с полем ввода открывает модальное окно, а затем нажатие кнопки отправляет его информацию в поле ввода».

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

В итоге я использовал: 

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 - это способ решить эти проблемы.

0 голосов
/ 29 мая 2018

Я думаю, что это похоже на: React js onClick не может передать значение методу

Однако самое простое решение: 

class Modal extends React.Component { 
  resolve = (val) => { console.log(val); } 

  render() { 
    return ( 
      <div> 
        <div> 
          <UnitBlock name="1" onClick={() => this.resolve(1)}/> 
          <UnitBlock name="2" onClick={() => this.resolve(2)}/> 
        </div> 
      </div>)  
  } 

} 

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

лучшее решение

https://codesandbox.io/s/p9lk4ooxxq

class UnitBlock extends React.Component { 
  resolve = (val) => { console.log(val); } 

  render() { 
    return <div className="UnitBlock" onClick={
      () => this.resolve(this.props.name)}>{this.props.name}</div>
  }
}

function UnitBlock(props) { 
    return ( 
      <div> 
        <div> 
          <UnitBlock name="1"}/> 
          <UnitBlock name="2"}/> 
        </div> 
      </div>)  
  } 

}
...