Solid JS中按钮onClick无法动态变更问题求助

你的问题出在JSX属性中直接调用flag()只会在组件初始化时计算一次，后续flag变化时不会重新执行这个表达式，所以按钮绑定的点击函数始终是初始值。

两种可行的解决方案： #

方案1：用箭头函数包裹判断逻辑

每次点击按钮时再获取最新的flag状态，动态执行对应函数：

const [flag, setFlag] = createSignal(false)
const trueFunc = () => console.log('true')
const falseFunc = () => {
  console.log('false')
  setFlag(true)
}

return (
  <>
    <button onClick={() => flag() ? trueFunc() : falseFunc()}>{buttonText()}</button>
  </>
);

方案2：用createMemo创建响应式处理函数

通过createMemo追踪flag的变化，当flag更新时自动返回最新的处理函数：

const [flag, setFlag] = createSignal(false)
const trueFunc = () => console.log('true')
const falseFunc = () => {
  console.log('false')
  setFlag(true)
}

const handleClick = createMemo(() => flag() ? trueFunc : falseFunc);

return (
  <>
    <button onClick={handleClick()}>{buttonText()}</button>
  </>
);

原理说明 #

Solid JS中，只有在响应式上下文（比如createEffect、createMemo，或者组件渲染时的追踪范围）内调用signal的getter，才会建立依赖关系并自动更新。你原来的代码中，flag()是在JSX属性的初始赋值中调用，不属于响应式追踪范围，所以不会随着flag变化而重新计算。

内容的提问来源于stack exchange，提问作者Ashis Paul