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

你不能。

任何格式的组件

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

是无状态组件。就像单词一样，它们没有状态，因此您无法更改组件。

我建议您使用具有比无状态组件更好的状态的PureComponent。它们为您提供状态的使用，并提高性能。

class abc extends PureComponent {
  state = {}

  someMethod = () => {
    this.setState({
      name1: value1,
    });

  }
}

注意。总是比PureComponent更喜欢Stateless components。

对于无状态组件，您也只能操作父组件的状态，并在此处传递其道具。

Answer 2

您可以使用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 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>
  );
};

如何在非类组件中设置状态

3 个答案: