Javascript 在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',

  },
];

{
list.map（（项目，i）=>{
返回(
{this.setState（{subject:subject}}}
onValueChange={this.onPicker}>
);
})
}
导出常量列表=[
{
农夫的名字：“拉姆拉尔”，
Farmer_地点：“Karimnagar”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·洛希特”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“5”，
},
{
农民的名字：“Ajit gopal”，
Farmer_地点：“Warangal”，
培养方法：“常规”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·凯沙夫”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“4”，
},
{
农民的名字：“迪帕克”，
Farmer_地点：“Siddipet”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
品种：“Utkal Ava”，
农药残留指数：“低于EPA耐受性”，
NoofordersProcessedForthis表单：“3”，
},
];

如果您只想更改指定的组件，请删除

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'
  },
];

导出默认类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主题：“”
}
}
onPicker=（val，itemIndex）=>{
log（'onPicker值：'，val'和索引：'，itemIndex）
this.setState（{subject:val}）；
}
render（）{
const myPicker=list.map（（项目，i）=>{
返回(
this.onPicker（itemValue，itemIndex）}>
);
})
返回(
{myPicker}
);
}
}
导出常量列表=[
{
农夫的名字：“拉姆拉尔”，
Farmer_地点：“Karimnagar”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·洛希特”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“5”
},
{
农民的名字：“Ajit gopal”，
Farmer_地点：“Warangal”，
培养方法：“常规”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·凯沙夫”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“4”
},
{
农民的名字：“迪帕克”，
Farmer_地点：“Siddipet”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
品种：“Utkal Ava”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“3”
},
];

如果您只想更改指定的组件，请删除

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'
  },
];

导出默认类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主题：“”
}
}
onPicker=（val，itemIndex）=>{
log（'onPicker值：'，val'和索引：'，itemIndex）
this.setState（{subject:val}）；
}
render（）{
const myPicker=list.map（（项目，i）=>{
返回(
this.onPicker（itemValue，itemIndex）}>
);
})
返回(
{myPicker}
);
}
}
导出常量列表=[
{
农夫的名字：“拉姆拉尔”，
Farmer_地点：“Karimnagar”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·洛希特”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“5”
},
{
农民的名字：“Ajit gopal”，
Farmer_地点：“Warangal”，
培养方法：“常规”，
收获日期：“2018年8月29日至2018年9月5日”，
综艺节目：“阿尔卡·凯沙夫”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“4”
},
{
农民的名字：“迪帕克”，
Farmer_地点：“Siddipet”，
培养方法：“有机”，
收获日期：“2018年8月29日至2018年9月5日”，
品种：“Utkal Ava”，
农药残留指数：“低于EPA耐受性”，
Nooforders已处理此表单：“3”
},
];

正如@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>

this.setState（{subject:subjectValue}）}>

正如@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>

this.setState（{subject:subjectValue}）}>

请共享您的列表数据以及事件处理程序函数codeonPicker=val=>{this.setState（{subject:val}）}检查我编辑的代码您需要为每个对象维护与

farmer\u name

和

farmer\u location

相同的值，为picker selected value再添加一个字段。能否详细说明请共享列表数据以及事件处理程序函数codeonPicker=val=>{this.setState（{subject:val}）；}检查我编辑的代码您需要为每个对象维护与

farmer\u name

和

farmer\u location

相同的值，为picker selected value再添加一个字段。你能详细地检查我的图像吗？如果我从picker中选择（输入）7，它将更改为all list。但是我想更改列表的特定项我尝试了你的代码..但是