如何为react-native-paper的SegmentedButtons设置初始值实现预选中？

要让表单里的选项在页面加载时就处于预选中状态，不同场景有不同的实现方式，下面分原生HTML和常见前端框架两种情况说明：

原生HTML场景 #

单选按钮（Radio） #

直接给目标单选框添加checked属性，页面加载时就会自动选中该选项：

<label>
  <input type="radio" name="gender" value="female" checked />
  女
</label>
<label>
  <input type="radio" name="gender" value="male" />
  男
</label>

复选框（Checkbox） #

同样给需要预选中的复选框添加checked属性，支持同时预选多个选项：

<label>
  <input type="checkbox" name="hobby" value="reading" checked />
  阅读
</label>
<label>
  <input type="checkbox" name="hobby" value="running" />
  跑步
</label>

下拉选择框（Select） #

给目标<option>标签添加selected属性，即可设置默认选中项：

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">广州</option>
</select>

常见前端框架场景 #

Vue.js（以Vue3为例） #

通过v-model绑定响应式数据，初始化时给绑定的变量设置对应选项的value值即可：

<template>
  <div>
    <input type="radio" v-model="gender" value="female" />女
    <input type="radio" v-model="gender" value="male" />男
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 初始化值对应要预选中的选项value
const gender = ref('female')
</script>

React.js（函数组件） #

通过useState初始化状态值，给表单元素设置checked属性（单选/复选）来控制选中状态：

import { useState } from 'react';

function Form() {
  const [gender, setGender] = useState('female');

  return (
    <div>
      <input
        type="radio"
        name="gender"
        value="female"
        checked={gender === 'female'}
        onChange={(e) => setGender(e.target.value)}
      />女
      <input
        type="radio"
        name="gender"
        value="male"
        checked={gender === 'male'}
        onChange={(e) => setGender(e.target.value)}
      />男
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Mariana Reis Silveira