Question

我当前正在React中创建一个组件，并且正在使用ES Lint规则react/jsx-no-bind。我的问题是我希望能够将参数传递给组件函数。这是我想要使用的代码：

class LanguageDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  changeLanguage = (lang) => {
    console.log(lang)
  };

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <button onCLick={() => this.changeLanguage(lang)}>{lang}</button>)}
      </div>
    )
  }

...

这会拉出ESlint错误：

JSX道具不应使用箭头功能

我不完全确定如何在不使用箭头功能或不使用.bind()的情况下实现这一目标。我可以将数据属性添加到button元素，然后将事件传递到changeLanguage函数中，并使用event.target（）来获取属性，但这并不意味着应该采用这种方法在React中

有人可以告诉我正确的方法吗？

Answer 1

您可以将按钮重构为自己的组件：

class MyButton extends Component {
  static propTypes = {
    language: PropTypes.string.isRequired,
  };

  onClick = () => console.log(this.props.language);

  render() {
    const {language} = this.props;
    return (
      <button onClick={this.onClick} type="submit">
        {language}
      </button>);
  }
}

，然后在LanguageDropDown类中，使用MyButton像这样：

class LanguageDropdown extends Component {
  ...

  render() {
    return (
      <div>
        {this.props.languages.map(lang => <MyButton key={lang} language={lang}/>)}
      </div>
    )
  }

  ...
}

还有两件事：

您有错别字onCLick应该是onClick
您需要钥匙来重复物品

Answer 2

尝试以下代码。在这里，我尝试将值带入状态，也可以使用道具进行尝试。 class LanguageDropdown扩展了Component { 构造函数（道具）{ 超级（道具）; this.state = {语言：['telugu'，'hindi'，'english']}; // this.changeLanguage = this.changeLanguage.bind（this）; }

  changeLanguage(event,lang){
    //event.preventDefault();
    console.log('change lang: '+JSON.stringify(lang));
  };

  render() {
    return (
      <div>
        {this.state.languages.map(lang => <button onClick={(event)=>this.changeLanguage(event,lang)}>{lang}</button>)}
      </div>
    )
  }
}


render(<LanguageDropdown />, document.getElementById('root'));

when you bind the handler in the onClick event where you are passing the value to the handler, then we have to pass that value from the event and collect it to get that value.

React / ESLint-JSX道具不应该使用箭头功能

2 个答案: