Как передать в React id элемента

104

25 августа 2019, 00:30

пытаюсь разобраться в 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" инпута передать в функцию search? так как в функции search начинается разбор инпута и забор его value

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

или вообще как сразу его vakue передавать после каждого нажатия клавиши? По доке и примерам пока не могу понять этого.

Answer 1

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>