主页 / 问题 / 935104
Accepted
Владислав
Asked:2020-01-22 15:58:42 +0000 UTC2020-01-22 15:58:42 +0000 UTC

如何将元素 id 传递给 React

  • 772

我试图理解 React js，但我不知道现在如何传递挂起函数的元素的 id 属性。

我有代码：

class Lable extends React.Component {

  render() {
    return (
      <p htmlFor="inp" className="inp">
      <label>
      {InputRequestRoad()}
      <span className="label">1:</span>
      <span className="border"></span>
      </label>
       </p>
    );
  }
}

function InputRequestRoad(prop) {
   function onKeyUp(e) {
     search(e.value);
   }

   return (
     <input type="text" id="road" placeholder="&nbsp;" onKeyUp={onKeyUp({this.id})}/>
   );
  }
ReactDOM.render(
 <Lable />,
document.getElementById("root")
);

如何将输入的 id="road" 传递给搜索功能？因为搜索函数开始解析输入并获取它的值

var field = document.getElementById(name);
console.log(field.value)

或者通常如何在每次击键后立即传输它？根据dock和examples，我仍然无法理解这一点。

javascript

1 个回答

  1. Best Answer

    class Lable extends React.Component {
  render() {
    return (
<p htmlFor="inp" className="inp">
      <label>
       <input type="text" onChange={this.handleChange.bind(this)}/>
      <span className="label">1:</span>
      <span className="border"></span>
      </label>
       </p>
    );
  }
  handleChange(e) {
    this.props.onSearch(e.target.value);
  }
}

function search(text) {
  console.log(text);
}
 

React.render(
    <Lable onSearch={search}/>,
    document.body
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

    • 0

相关问题