Javascript React/ESLint-JSX道具不应使用箭头函数

我目前正在react中创建一个组件，并使用ES Lint规则

react/jsx no bind

。我这里的问题是，我希望能够将一个参数传递给我的components函数。以下是我希望能够使用的代码：

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>
    )
  }

...

class language下拉列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
changeLanguage=（lang）=>{
console.log（lang）
};
render（）{
返回(
{this.props.languages.map（lang=>this.changeLanguage（lang）}>{lang}}
)
}
...

这将调出ESlint错误：

JSX道具不应该使用箭头函数

我不完全确定如何在不使用箭头函数或使用

.bind（）

的情况下实现这一点。我可以向button元素添加一个数据属性，然后只需将事件传递到

changeLanguage

函数中，并使用event.target（）获取属性，但这并不是React中应该采用的方法

谁能告诉我正确的方法是什么

试试下面的代码。 在这里，我尝试将值带入状态，同样可以使用道具进行尝试。 类语言下拉列表扩展组件{ 建造师（道具）{ 超级（道具）； this.state={语言：['telugu'，'hindi'，'english']}； //this.changeLanguage=this.changeLanguage.bind（this）； }

changeLanguage（事件，语言）{
//event.preventDefault（）；
log（'change lang:'+JSON.stringify（lang））；
};
render（）{
返回(
{this.state.languages.map（lang=>this.changeLanguage（event，lang）}>{lang}}
)
}
}
render（，document.getElementById（'root'））；
当您在onClick事件中绑定处理程序并将值传递给处理程序时，我们必须从事件中传递该值并收集该值以获得该值。

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

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>);
  }
}

class MyButton扩展组件{
静态类型={
语言：PropTypes.string.isRequired，
};
onClick=（）=>console.log（this.props.language）；
render（）{
const{language}=this.props；
返回(
{语言}
);
}
}

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

class LanguageDropdown extends Component {
  ...

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

  ...
}

class language下拉列表扩展组件{
...
render（）{
返回(
{this.props.languages.map（lang=>）}
)
}
...
}

还有几件事：

• 你有一个拼写错误onCLick应该是onCLick
• 您需要一个重复项的键

---

如果可以的话，请看一看，为什么要使用规则

no bind

？no bind是我继承的es lint配置的一部分。我相信它的最佳实践？似乎是唯一合乎逻辑的选择！谢谢你的其他观点，我只是想发布最少的代码：）

class LanguageDropdown extends Component {
  ...

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

  ...
}