У меня есть щелчок, который вызывает функцию setmenu (в списке className = "menu"), но я не хочу повторять это в моих 3 различных возвратах. Вместо этого я хочу поместить его в свою собственную функцию / компонент и вызвать его 3 раза.

Однако, когда я перемещаю его, щелчок больше не может найти setmenu, хотя у меня все еще есть this.setmenu = this.setmenu.bind (this); в конструкторе?

 setmenu(event, value){

 this.setState({showForm: value});
 console.log(this.state.showForm, "this.state.showForm")
 }


render() {


const showForm = this.state.showForm;

if (showForm === 1){
  return (

     <div>

        <ul className="menu">      
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
        </ul>

        <FacebookLoginForm value={this.state.facebookResponse} />

     </div>
  );
}
else if(showForm === 2) {
  return (
    <div>

         <ul className="menu">      
              <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
              <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
              <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
         </ul>

         <ManualLoginForm /> 

    </div>


  );
}
else if (showForm === 3){
  return (

    <div>

        <ul className="menu">      
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
            <li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
        </ul>

        <ManualRegForm />

    </div>
  )

}
}
0
CerIs 27 Май 2017 в 22:44

2 ответа

Лучший ответ

Рабочий пример: https://jsfiddle.net/wostex/4wcdL6dw/3/

Просто передайте свою функцию в качестве опоры.

function ThreeLinks(props) {
    return (
    <div>
        <ul className="menu">      
            <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 1)}>Form 1</a></li>
            <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 2)}>Form 2</a></li>
            <li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 3)}>Form 3</a></li>
        </ul>
     </div>
  );
}

class App extends React.Component {

  setmenu(event, value){
    console.log('setmenu: ', event, value)
  }

  render() {
    return (
        <ThreeLinks clickHandler={this.setmenu.bind(this)} />
    );
  }
}
0
Egor Stambakio 27 Май 2017 в 20:19

Некоторые варианты @wostex answer

  • давайте прочитаем дополнительные параметры из атрибута href вместо вызова обработчика с дополнительными аргументами
  • событие должно быть предотвращено с помощью API событий, а не в старые времена href="javascript:void(0)"
  • Контейнер ссылок может поддерживать столько ссылок внутри себя, сколько нужно
function Links(props) {
    return (
        <div>
            <ul className="menu">      
                {props.children.map((e, key) => <li key={key} onClick={props.clickHandler}>{e}</li>)}
            </ul>
        </div>
    );
}

class App extends React.Component {
    constructor() {
        super()
        this.setmenu = this.setmenu.bind(this);
    }
 
    setmenu(event, value){
        event.preventDefault();
        console.log('setmenu: ', event.target.getAttribute('href'))
    }
  
    render() {
        return (
            <Links clickHandler={this.setmenu}>
                <a href="3">Form 3</a>
                <a href="2">Form 2</a>
            </Links>
        );
    }
}

ReactDOM.render(<App/>, 
	document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app">Loading...</div>
1
Krzysztof Safjanowski 27 Май 2017 в 21:21