Question

使用react hook，我想将所有类都转换为函数。假设这是我返回的渲染：

<link id="pagestyle" rel="stylesheet" type="text/css" href="assets/css/main.css">
<script>
  function swapStyleSheet(sheet) {
    switch(document.getElementById("myCheck").checked) {
    case true:
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/main2.css');
    break;
    default:
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/default.css');
}
</script>
<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox" id="myCheck" onchange="swapStyleSheet()"">
    <span class=" slider"></span>
</label>

如何将{layerList.map(i => { return ( <Button className="button-layer" type="primary" onClick={handleAa(i)} > {aa} </Button> <Button className="button-layer" type="primary" key={some_values} onClick={ handleChange(i) } > {i} </Button> ) } )}传递给handleChange函数？

Answer 1

您需要一个 function ，而不是一个函数调用作为函数prop的值。例如

onClick={() => handleAa(i)}

和

onClick={() => handleChange(i)}

如果您按原样传递函数调用，那么它将在呈现时立即调用一次，而不是在单击时调用。

Answer 2

{
  layerList.map(i => {
        return (
          <Button
            className="button-layer"
            type="primary"
            onClick={() => handleAa(i)}
          > {aa}
          </Button> 
          <Button
             className="button-layer"  
             type="primary"
             key={some_values}
             onClick={ () => handleChange(i) }
           >
             {i}
          </Button>
        )}
    )
}

您可能还需要定义函数

function handleAa(i){}
function handleChange(i){}

功能性反应：如何使用地图功能的输入处理setState？

2 个答案: