Обработчик событий с параметрами React

Question

Обработчик событий с параметрами React

0

У меня есть две кнопки (значки). В зависимости от того, какой из них я нажимаю (параметр), нужно вызвать функцию для изменения моего макета представления.

export default class ToolbarPictograms extends Component {
      static propTypes = {
        layout: PropTypes.string.isRequired,
        changeLayout: PropTypes.func.isRequired
      }

      constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }

      handleClick = value => {
        this.props.changeLayout(value)
      }

      render() {
        const changeLayout = this.props.changeLayout
        return (
          <div style={style.container}>
            <Divider />
            <div className='row end-xs'>
              <ViewListIcon onClick={() => changeLayout('list')} />
              <ViewModuleIcon onClick={() => changeLayout('modules')}/>
            </div>
            <Divider />
          </div>
        )
      }
    }

В настоящее время я использую функции стрелок, он работает, но у меня есть предупреждение: реквизиты JSX не должны использовать функции стрелок

Каков наилучший способ сделать что-то подобное в React?

user2670996 18 апр. 2016, в 14:56

Источник

Теги:

reactjs

1 ответ

Ещё вопросы

Radio- · Accepted Answer · 2016-04-18T13-57-00.000Z

Рекомендуемый способ сделать это - передать ссылку на функцию как свойство подкомпонентов, а затем подкомпоненты вызвать функцию с необходимыми аргументами. Причина этого заключается в том, что создание функций во время рендеринга может привести к проблемам с производительностью из-за увеличения активности сборщика мусора.

Таким образом, вы изменили бы свою функцию на

render() {
        const changeLayout = this.props.changeLayout
        return (
          <div style={style.container}>
            <Divider />
            <div className='row end-xs'>
              <ViewListIcon onClick={this.props.changeLayout} />
              <ViewModuleIcon onClick={this.props.changeLayout}/>
            </div>
            <Divider />
          </div>
        )
      }

Затем в ViewListIcon и ViewModuleIcon вызовите обратные вызовы с соответствующими аргументами. Они могут быть жестко закодированы или переданы в виде большего количества реквизитов.