在事件内联函数中反应js setstate

Question

我想验证重复值的表下拉列表

//////////////

//////////////

我想在 setState 中为表下拉重复值设置错误属性，我尝试在内联函数中进行。但我认为这种方式是不可能的。

    </TableRow>
{
    item.map(k => (
        <TableRow >

            <TableCell >
                <select  onChange={function(e){
                     item.forEach(k1 => {
                        if(k1.key===e.target.value)
                        {

                       this.setState({
                          err:'duplicate'
                         })                 
                            console.log(err)
                        }
                        else
                        {
                            k.key=e.target.value
                            this.setState({
                             err:''
                               })
                        }
                     })
                     }}>

            </select>

            </TableCell>
            </TableRow>

如果我尝试在类中创建和绑定函数，更改一个下拉列表会更改所有下拉列表 请建议我如何做内联函数中的状态

Answer 1

您根本不需要内联执行此操作。我看到您尝试内联的动机，因为您需要从循环中访问 item，但您可以将该元素发送到函数而不内联：

const onSelectchange = (e, k) => {
   item.forEach(k1 => {
      if(k1.key===e.target.value)
      {

     this.setState({
        err:'duplicate'
       })                 
          console.log(err)
      }
      else
      {
          k.key=e.target.value
          this.setState({
           err:''
             })
      }
   })
 }


return(</TableRow>
  {
  item.map(k => (
  <TableCell >
      <select  onChange={(e) => onSelectchange(e, k)}>

  </select>

  </TableCell>
</TableRow>)

您可以创建一个内联匿名函数并将e 和item 传递给该函数，然后像内联一样执行它。

如果您担心内联匿名函数的“性能”，请不要担心。这是一种神话。

确保您没有语法错误，因为现在代码不正确，无法简单地复制粘贴。