如何在不类型组件中设置

Question

我正在设置一个新应用程序。我使用React-native-search-Filter过滤我的列表。

我有多种卡类型。其中一个搜索栏组件。

我需要

card_10.js（搜索栏）

const Card_10 = (props) => {
  const {textStyle, cardStyle} = styles;

  return (
      <View style={cardStyle}>
        <Item style={{backgroundColor: '#f2f2f2',marginTop:10,marginLeft:5,marginBottom:20,marginRight:5, borderRadius:10, height:40}}>
          <Icon style={{marginLeft:10, color:'#8e8d92'}} name="ios-search"/>
          <SearchInput
            style={styles.searchInput}
            onChangeText={(term) => {
              props.func(term) }}
            placeholder="Type a message to search"
          />
        </Item>
      </View>
  );
};

我的列表组件是：card_8.js

const Card_8 = ({onPress, children, headers, bodylist, cardid}) => {
  const data = bodylist;
  this.state = {
    searchTerm: ''
  }
  function tiklandi(prop, itemid, cardid) {
    if (prop) {
      Actions.carddetail({itemid: itemid, cardid: cardid});
    } else {
      null
    }
  }
  function handleClick( name ){
    this.setState({searchTerm : name});
  }
  const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
  return (
    <View style={styles.container} onPress={onPress}>
      <Card_10 func={handleClick.bind(this)} />
      <Card style={{height: 40, marginTop: 0, marginBottom: 5}}>
        <CardItem>
          <Left>
            <Text style={[styles.itemleft, styles.baslik]}>{headers[0]}</Text>
          </Left>
          <Right>
            <Text style={[styles.itemright, styles.baslik]}>{headers[1]}</Text>
          </Right>
        </CardItem>
      </Card>
      <FlatList
        data={filteredEmails}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) =>
          <Card style={{height: 40, marginTop: 0, marginBottom: 0}}>
            <TouchableWithoutFeedback onPress={() => tiklandi(item.IsClickable, item.ItemId, cardid)}>
              <CardItem style={{height: 40}}>
                <Left>
                  <Title style={styles.itemleft}>{item.ItemDatas[0]}</Title>
                </Left>
                <Right>
                  <Title style={styles.itemright}>{item.ItemDatas[1]}</Title>
                </Right>
              </CardItem>
            </TouchableWithoutFeedback>
          </Card>}
      />
    </View>
  );
};

如您所见，我为组件使用const类型。我该如何在

上的card_8.js中进行setState

function handleClick( name ){
    this.setState({searchTerm : name});
}

Answer 1

您可以使用React Hooks

import React, { useState } from 'react';
const [searchTerm, setSearchTerm] = useState('');
function handleClick(name) {
  setSearchTerm(name);
}
const filteredEmails = emails.filter(createFilter(searchTerm, KEYS_TO_FILTERS))

Answer 2

你不能。

格式的任何组件

const abc = () => {
  return (
    ...
  );
}

是无状态的组件。像这个词一样，它们没有状态，所以您无法更改组件。

我建议您使用的属性分解与状态更好，该状态比无状态组件更好。它们为您提供状态的使用并为您提供绩效提升。

class abc extends PureComponent {
  state = {}
  someMethod = () => {
    this.setState({
      name1: value1,
    });
  }
}

注意。始终更喜欢PureComponent而不是Stateless components。

也适用于无状态组件，您只能从父组件中操纵状态，并在此处传递。

Answer 3

<Card_10 func={(name) => this.setstate({searchTerm: name})} />

///

const Card_10 = (props) => {
  const {textStyle, cardStyle} = styles;

  return (
      <View style={cardStyle}>
        <Item style={{backgroundColor: '#f2f2f2',marginTop:10,marginLeft:5,marginBottom:20,marginRight:5, borderRadius:10, height:40}}>
          <Icon style={{marginLeft:10, color:'#8e8d92'}} name="ios-search"/>
          <SearchInput
            style={styles.searchInput}
            onChangeText={(term) => 
              props.func(term) }
            placeholder="Type a message to search"
          />
        </Item>
      </View>
  );
};