React js의 함수에 인수를 전달하는 방법

React js의 함수에 인수를 전달하는 방법

1. 알림 창에 사용자의 이메일을 표시하고 싶습니다.그러나 e-메일을 표시하는 인수로 전달하는 방법을 모릅니다.경보 방식또, 어느쪽도 사용할 수 없게 되어 있습니다.그래서 디스플레이를 할당해야 합니다.변수에 대해 경고하고 onClick에서 사용합니다.나는 왜 내가 직접 전화를 걸지 못하게 하는지 모르겠다.

   class People extends React.Component{
   render (){
           var handleClick = this.displayAlert;
           var items = this.props.items.map(function(item) {
               return(
                   <ul key = {item.id}>
                       <li>
                           <button onClick= {handleClick}>{item.lastName + ', ' + item.firstName}</button>
                       </li>
                   </ul>
               )
           });
           return (<div>{items}</div>);
    }
   
   displayAlert (){
       alert('Hi');
   }
   }
   
    class PersonList extends React.Component{
        render () {
           return (
       <div>
           <People items={this.props.people}/> /* People is an array of people*/
       </div>
       );
     }
   }
   

ES6의 방법:

화살표 기능 사용=>

const items = this.props.items.map((item) => (
  <ul key={item.id}>
    <li>
      <button onClick={() => this.displayAlert(item.email)}>
        {item.lastName + ', ' + item.firstName}
      </button>
    </li>
  </ul>
));

onClick어나니머스 함수가 호출되어 실행됩니다.this.displayAlert(item.email)

ES5의 방법:

이 작업은 매개 변수를 사용하여 수행할 수 있습니다.

너도 합격해야 해this또는 bind를 사용하여 적절한 컨텍스트를 유지합니다..map기능:

var items = this.props.items.map(function(item) {
  return (
    <ul key={item.id}>
      <li>
        <button onClick={this.displayAlert.bind(this, item.email)}>
          {item.lastName + ', ' + item.firstName}
        </button>
      </li>
    </ul>
  );
}, this);

여기에 표시된 예: 반응 - 구성 요소 간 통신

화살표 기능과 babel 플러그인 "transform-class-properties" 사용

class People extends React.Component {
  render() {
    return (
      <ul>
        { this.props.items.map( (item) => (
          <li key={item.id}>
            <button onClick={this.displayAlert(item)}>
              {item.lastName + ', ' + item.firstName}
            </button>
          </li>
        ))}
      </ul>
    )
  }

  displayAlert = (item) => (event) => {
    // you can access the item object and the event object
    alert('Hi');
  }
}

언급URL : https://stackoverflow.com/questions/30608347/how-to-pass-arguments-to-functions-in-react-js