當我在React Native中單擊列表項時如何更改文本？

Question

當我選擇選擇器時，它正在更改所有列表。 我只想更改選定的項目。 我正在使用react native list ...例如，我在選擇器中選擇5，它在列表中的所有行中都在變化。 我嘗試了很多方法。

這是代碼：

    {
      list.map((item, i) => {
        return (
          <Picker style={{ color: 'black' }}
            selectedValue={this.state.subject}
            // onValueChange={(subject,i) => { this.setState({ subject: subject }) }}
            onValueChange={this.onPicker}                              >
            <Picker.Item label="Enter Quantity" value="Enter Quantity" />
            <Picker.Item label="1" value="1" />
            <Picker.Item label="2" value="2" />
            <Picker.Item label="3" value="3" />
            <Picker.Item label="4" value="4" />
            <Picker.Item label="5" value="5" />
            <Picker.Item label="6" value="6" />
            <Picker.Item label="7" value="7" />
            <Picker.Item label="8" value="8" />
            <Picker.Item label="9" value="9" />
            <Picker.Item label="10" value="10" />
          </Picker>
        );
      })
    }

export const list = [
  {
    Farmer_Name: 'Ramlal',
    Farmer_Location: 'Karimnagar',
    Cultivation_Method: 'Organic',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Arka Lohit',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '5',

  },
  {
    Farmer_Name: 'Ajit gopal',
    Farmer_Location: 'Warangal',
    Cultivation_Method: 'Conventional',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Arka Keshav',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '4',

  },
  {
    Farmer_Name: 'Deepak',
    Farmer_Location: 'Siddipet',
    Cultivation_Method: 'Organic',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Utkal Ava',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '3',

  },
];

Answer 1

如果您只想更改指定的組件，請刪除selectedValue={this.state.subject}

我不確定您要達到的目標，但這是您的解決方法。

export default class TestComponent extends Component {
  constructor(props){
    super(props);
    this.state = {
      subject:''
    }
  }

  onPicker = (val, itemIndex) => {
    console.log('onPicker value:', val, 'and index:',itemIndex)
    this.setState({subject: val});
  }

  render() {
    const myPicker = list.map((item, i) => {
      return (
        <Picker
          key={i}
          onValueChange={(itemValue, itemIndex) => this.onPicker(itemValue, itemIndex)}>
          <Picker.Item label="Enter Quantity" value="Enter Quantity" />
          <Picker.Item label="1" value="1" />
          <Picker.Item label="2" value="2" />
          <Picker.Item label="3" value="3" />
          <Picker.Item label="4" value="4" />
          <Picker.Item label="5" value="5" />
          <Picker.Item label="6" value="6" />
          <Picker.Item label="7" value="7" />
          <Picker.Item label="8" value="8" />
          <Picker.Item label="9" value="9" />
          <Picker.Item label="10" value="10" />
        </Picker>
      );
    })

    return (
      <View>
        {myPicker}
      </View>
    );
  }
}

export const list = [
  {
    Farmer_Name: 'Ramlal',
    Farmer_Location: 'Karimnagar',
    Cultivation_Method: 'Organic',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Arka Lohit',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '5'

  },
  {
    Farmer_Name: 'Ajit gopal',
    Farmer_Location: 'Warangal',
    Cultivation_Method: 'Conventional',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Arka Keshav',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '4'

  },
  {
    Farmer_Name: 'Deepak',
    Farmer_Location: 'Siddipet',
    Cultivation_Method: 'Organic',
    Harvest_Date: '29 Aug 2018 to 5 Sep 2018',
    Variety: 'Utkal Ava',
    Pesticide_Residue_Index: 'Below EPA Tolerance',
    NoofOrdersProcessedforThisForm: '3'
  },
];

Answer 2

正如@SGhaleb所說，您正在將所有值設置為this.state.subject

<Picker style={{ color: 'black' }}
   selectedValue={this.state.subject}
   onValueChange={(subjectValue, subjectIndex) => this.setState({ subject: subjectValue })}>
  <Picker.Item label="Enter Quantity" value="Enter Quantity" />
  <Picker.Item label="1" value="1" />
  <Picker.Item label="2" value="2" />
  <Picker.Item label="3" value="3" />
</Picker>