javascript - 当我单击 react native 中的列表项时如何更改文本？

Question

当我选择选择器时，它会更改所有列表。我只想更改选定的项目。我正在使用 React Native 列表...例如，我在选择器中选择 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'
  },
];