在 React 的另一个输入值中发送 LI 值

Question

我在一个 React 项目中，在 axios.get 之后，我在 axios.get 之前的一个空 UL 中获得了许多 LI。 当 axios.get 后显示 LI 时，我想单击一个 LI，将 LI 值发送到输入值。 我知道如何使用 Jquery 来做到这一点（这里的例子：http://jsfiddle.net/Ender/QdWxH/ & http://jsfiddle.net/kbFUu/1/），但是我不知道如何在 React 中做到这一点...有人可以帮助我吗？

在我的 src/App.js 中我得到了函数

getValueFromLi = (evt) => {
  $('.App-Result-Li').on('click',function() {
    var content= $(this).text();
    $('.App-Form-Trips-cityDeparture').val(content);
  });
}

在src/components/Results/index.js（别担心，道具等我做得很好），我得到了回调

<li
   onClick={getValueFromLi}
   data-value={city.local_name}
   className="App-Result-Li"
 >

你知道我做错了什么吗？

我的项目在 Github 上：https://github.com/Versifiction/api-tictactrip

涉及的文件： src/App.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/App.js) & src/components/Results/index.js (https://github.com/Versifiction/api-tictactrip/blob/master/src/components/Results/index.js)

非常感谢！

Answer 1

也许你可以这样尝试：

<li
   onClick={() => this.provideLocalName(city.local_name)}
   data-value={city.local_name}
   className="App-Result-Li"
 >

另外，您可以在 getValueFromLi 函数中解析事件对象，然后对其进行处理，例如

getValueFromLi = e => {
  console.log('li element: ', e.target)
  // do something with li, now you have reference to the dom node
}

<li
   onClick={this.getValueFromLi}
   data-value={city.local_name}
   className="App-Result-Li"
 >