WordPress 交互 API 如何使用 data-wp-bind--循环检查？

Question

是否可以在循环生成的一组单选按钮上绑定选中状态，并由状态确定选中状态？

奇怪的是，在我当前的设置中，尽管状态为 2，但仍检查了最后一个值。 如果我单击一个值，它会在状态和输入字段中正确设置，但右侧的复选框不会显示已选中。您需要单击两次才能检查它...... 除非选择与状态值类似的 2。

我很困惑。

行为会根据使用字符串或整数而改变？？？ “1”与 1

这是时间问题还是重新渲染问题？ 是否支持绑定？ 恕我直言，应该是这样。

如何让它发挥作用？

view.js：

import { store, getContext } from '@wordpress/interactivity';

const { state } = store( 'example', {
    state: {
        answers: [ 1, 2, 3, 4 ],
        chosen: 2,
    },
    actions: {
        handle: () => {
            const context = getContext();
            console.log( context.answer );
            state.chosen = context.answer;
            console.log( state );
        },
    },
} );

渲染.php

<div <?php echo get_block_wrapper_attributes(); ?> data-wp-interactive="example"
    <?php echo wp_interactivity_data_wp_context( array() ); ?>>
    <div>
        <template data-wp-each--answer="state.answers">
            <input type="radio" data-wp-bind--checked="state.chosen" name="choice" data-wp-bind--value="context.answer"
                data-wp-on--click="actions.handle">
            <label for="" data-wp-text="context.answer">
            </label>

        </template>
    </div>
    <input data-wp-bind--value="state.chosen" type="text">
</div>

Answer 1

感谢 https://github.com/sirreal https://github.com/WordPress/gutenberg/discussions/63595

他的回答有效：

该指令将 state 中的值绑定到选中的属性：data-wp-bind--checked="state.chosen"

结果是所有输入的属性都已检查=“2”。

您需要使用派生状态将检查的值绑定到布尔值，如下所示：

const { state } = store( "example", {
  state: {
    get isChecked() {
      return getContext().answer === state.chosen;
    },
  },
} );

并相应地绑定选中的值：data-wp-bind--checked="state.isChecked"