Javascript 点击后更改图标

我有一个组件如下所示：

const criteriaList = [
  'Nur Frauen',
  'Freunde Zweiten Grades',
];

export const FilterCriteriaList: React.FunctionComponent = () => {
  const [state, setState] = useState(false);

  useEffect(() => {
    console.log('state is,', state);
  });

  const myFunction = () => {
    console.log('checking state', state);
    if (state == false) {
      setState(true);
    } else {
      setState(false);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: string, index: number) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity 
              onPress={() => {
                myFunction();
              }}>
              <Icon
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

const准则列表=[
“努尔·弗劳恩”，
“Freunde Zweiten等级”，
];
导出常量FilterCriteriaList:React.FunctionComponent=（）=>{
const[state，setState]=使用状态（false）；
useffect（（）=>{
log（'状态为，'，状态）；
});
常量myFunction=（）=>{
console.log（'检查状态'，状态）；
if（state==false）{
设置状态（真）；
}否则{
设置状态（假）；
}
};
返回(
{criteriaList.map（（项：字符串，索引：编号）=>(
{
myFunction（）；
}}>
{item}
))}
);
};

目前，我使用的是圆形薄图标。我想更改它，以便每次单击图标时，它都会更改为圆点图标。比如单选按钮。不过，我不太清楚如何做到这一点

我曾想过使用三元运算符，但由于我正在映射我的字段，因此Idk如何集体设置状态。也许使用索引？我不想为每个字段创建单独的状态。下面是一个类似的小吃演示：

我希望能够选择多个/取消选择选项。我不想在所有字段上同时应用相同的规则

---

注意：onPress功能也可以直接用于图标上，而不是TouchableOpacity（虽然不是首选）

使用三元模式对我来说似乎是正确的方法。你不能这样做吗

name={state ? 'dot-circle-o' : 'circle-thin'}

您还可以重构您的函数：

 const myFunction = () => {
    console.log('checking state', state);
    setState(!state)
 };

如果您有多个字段，那么有很多方法来处理它。您可以多次调用

useState

，例如：

const [field1, setField1] = useState(false);
const [field2, setField2] = useState(false);

您还可以将所有字段存储在相同的状态：

const [state, setState] = useState({field1: false, field2: false});

...

  const myFunction = (fieldName) => {
    console.log('checking state', state);
    setState({...state, [fieldName]: !state[fieldName]})
  };

我想您应该使用

项

作为“字段名”，在这种情况下：

return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: string, index: number) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity 
              onPress={() => {
                myFunction(item);
              }}>
              <Icon
                name={state[item] ? 'dot-circle-o' : 'circle-thin'}
                color="#31C283"
                size={moderateScale(20)}
              />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );

---

对我来说，使用三元组听起来是正确的方法。你能不能做一些类似于：

name={state ? 'dot-circle-o' : 'circle-thin'}

您还可以重构您的函数：

 const myFunction = () => {
    console.log('checking state', state);
    setState(!state)
 };

如果您有多个字段，那么有很多方法来处理它。您可以多次调用

useState

，例如：

const [field1, setField1] = useState(false);
const [field2, setField2] = useState(false);

您还可以将所有字段存储在相同的状态：

const [state, setState] = useState({field1: false, field2: false});

...

  const myFunction = (fieldName) => {
    console.log('checking state', state);
    setState({...state, [fieldName]: !state[fieldName]})
  };

我想你会用

项
作为“字段名？在这种情况下：

return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: string, index: number) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity 
              onPress={() => {
                myFunction(item);
              }}>
              <Icon
                name={state[item] ? 'dot-circle-o' : 'circle-thin'}
                color="#31C283"
                size={moderateScale(20)}
              />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );

代码如下所示。
您必须将所选项目的索引设置为状态，并使用它来选择图标

const criteriaList = [
  {title:'My List',checked:false},
  {title:'Friends listt',checked:false},
  {title:'Not Good',checked:false},
  {title:'Sweet and sour',checked:false},
  {title:'Automatic',checked:false},
];

export const FilterCriteriaList: React.FunctionComponent = () => {
  const [state, setState] = useState(criteriaList);

  useEffect(() => {
    console.log('state is,', state);
  });

  const myFunction = (index) => {
    console.log('checking state', state);
    const arr=[...state];
    
    arr[index].checked=arr[index].checked?false:true;
    setState(arr);
    
  };

  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: Any,index:number) => (
        <View key={item}>
          <View key={item} style={styles.criteriaRow}>

              <Icon 
                style={styles.icon}
                name={item.checked?"circle":"circle-thin"}
                color="#31C283"
                size={moderateScale(20)}
                onPress= {()=>myFunction(index)}
              />
            <Text style={styles.text}>{item.title}</Text>
          </View>
          
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

const准则列表=[
{标题：'My List'，选中：false}，
{标题：'Friends listt'，选中：false}，
{标题：'Not Good'，选中：false}，
{标题：'Sweet and sour'，选中：false}，
{标题：'Automatic'，选中：false}，
];
导出常量FilterCriteriaList:React.FunctionComponent=（）=>{
常量[状态，设置状态]=使用状态（标准列表）；
useffect（（）=>{
log（'状态为，'，状态）；
});
常量myFunction=（索引）=>{
console.log（'检查状态'，状态）；
常量arr=[…状态]；
arr[index].checked=arr[index].checked？false:true；
设置状态（arr）；
};
返回(
{criteriaList.map（（项目：任意，索引：编号）=>(
myFunction（索引）}
/>
{item.title}
))}
);
};
代码如下所示。
您必须将所选项目的索引设置为状态，并使用它来选择图标

const criteriaList = [
  {title:'My List',checked:false},
  {title:'Friends listt',checked:false},
  {title:'Not Good',checked:false},
  {title:'Sweet and sour',checked:false},
  {title:'Automatic',checked:false},
];

export const FilterCriteriaList: React.FunctionComponent = () => {
  const [state, setState] = useState(criteriaList);

  useEffect(() => {
    console.log('state is,', state);
  });

  const myFunction = (index) => {
    console.log('checking state', state);
    const arr=[...state];
    
    arr[index].checked=arr[index].checked?false:true;
    setState(arr);
    
  };

  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: Any,index:number) => (
        <View key={item}>
          <View key={item} style={styles.criteriaRow}>

              <Icon 
                style={styles.icon}
                name={item.checked?"circle":"circle-thin"}
                color="#31C283"
                size={moderateScale(20)}
                onPress= {()=>myFunction(index)}
              />
            <Text style={styles.text}>{item.title}</Text>
          </View>
          
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

const准则列表=[
{标题：'My List'，选中：false}，
{标题：'Friends listt'，选中：false}，
{标题：'Not Good'，选中：false}，
{标题：'Sweet and sour'，选中：false}，
{标题：'Automatic'，选中：false}，
];
导出常量FilterCriteriaList:React.FunctionComponent=（）=>{
常量[状态，设置状态]=使用状态（标准列表）；
useffect（（）=>{
log（'状态为，'，状态）；
});
常量myFunction=（索引）=>{
console.log（'检查状态'，状态）；
常量arr=[…状态]；
arr[index].checked=arr[index].checked？false:true；
设置状态（arr）；
};
返回(
{criteriaList.map（（项目：任意，索引：编号）=>(
myFunction（索引）}
/>
{item.title}
))}
);
};
但如何设置状态？我希望能够选择多个/取消选择选项。这将对所有字段应用相同的规则。这似乎是一个好方法。你能补充一下我如何在onPress上直接传递文件名吗？此外，我将如何在三元运算符中检查它？因此，在
useState（{field1:false，field2:false}）
中，我应该使用字段名（字符串）作为field1 field2等？为设置初始状态而更新，但我将如何设置状态？我希望能够选择多个/取消选择选项。这将对所有字段应用相同的规则。这似乎是一个好方法。你能补充一下我如何在onPress上直接传递文件名吗？此外，我将如何在三元运算符中检查它？因此，在
useState（{field1:false，field2:false}）
中，我应该使用字段名（字符串）作为field1 field2等？为设置初始状态而更新项目是否可以是对象而不是字符串？然后你可以很容易地返回sorry我不是typesscript方面的专家，更新了答案，还删除了touchableopacity我得到标题和选中键的此错误：（你能检查一下吗？这些项目可以是一个对象而不是字符串吗？然后你就可以很容易地返回它了吗？对不起，我不是类型方面的专家手写，更新了答案，还删除了可触摸的不透明度我得到了标题和选中键的这个错误：（你能检查一下吗？