Flutterflow：如何让提交按钮感知用户选中的组件？

核心思路 #

用状态变量存储用户选中的图片URL，组件点击时更新该状态，提交按钮直接读取这个状态和文档中的correctAnswer对比即可。

具体实现步骤 #

• 步骤1：定义状态变量
  在父组件里声明状态，用来记录用户选中的图片URL：

  const [selectedImageUrl, setSelectedImageUrl] = useState(null);
  

• 步骤2：给每个组件绑定点击事件
  每个带图片的组件添加点击事件，点击时把自身的图片URL存入状态，还可以加个选中样式让用户直观感知：

  // 示例组件，imgUrl来自你的文档引用
  const ImageOption = ({ imgUrl }) => {
    return (
      <div 
        onClick={() => setSelectedImageUrl(imgUrl)}
        style={{ 
          padding: '8px',
          border: selectedImageUrl === imgUrl ? '2px solid #2196F3' : '1px solid #eee',
          cursor: 'pointer'
        }}
      >
        <img src={imgUrl} alt="选项图片" style={{ width: '100%' }} />
      </div>
    );
  };
  

• 步骤3：提交按钮的校验逻辑
  提交按钮点击时，读取状态变量，和从文档获取的correctAnswer做对比：

  const handleSubmit = async () => {
    if (!selectedImageUrl) {
      alert('请先选择一个选项');
      return;
    }
    // 假设已从文档中获取到correctAnswer
    const docData = await db.collection('your-collection').doc('your-doc-id').get();
    const correctAnswer = docData.data().correctAnswer;
  
    if (selectedImageUrl === correctAnswer) {
      alert('回答正确！');
    } else {
      alert('回答错误，请重试');
    }
  };
  
  // 渲染提交按钮
  <button onClick={handleSubmit} disabled={!selectedImageUrl}>提交答案</button>
  

关键说明 #

• 状态变量selectedImageUrl是组件和提交按钮的核心桥梁，所有组件点击都会更新它，提交按钮直接读取即可，不需要复杂的回调传递。
• 如果是Vue等其他框架，逻辑完全通用：用ref或data存选中状态，组件点击更新状态，提交时校验。
• 要是需要支持多选，把状态改成数组，点击时切换URL的存/取状态就行。

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