react-nativeのPickeronValueChangeからラベルを取得するにはどうすればよいですか？

debugcn 投稿 Dev

キム・イェウォン

（RNPickerSelect内の）itemsの値を取得したい。ex1）アイテムがuc、の場合、を取得したいlabel("ucCollege") as this.state.text。ex2）の場合this.state.main_cate is "portal"、constnulのラベルを取得したい。最後に、最後のコード行のようなテキストとしてラベルを印刷したいと思います。これどうやってするの？

const uc = [
  {
    label: "ucCollege",
    value: "uc",
  },
];
const isa = [
  {
    label: "isaCollege",
    value: "isa",
  },
];
const nul = [
  {
    label: "nulCollege",
    value: "nul",
  },
];
export default class URL extends Component {
  constructor(props) {
    super(props);
    this.state = {
      main_cate: undefined,
      sub_cate: undefined,
      text: undefined,
    };
  }
  render() {

    return (
      <View>
        ...

        <RNPickerSelect
          placeholder={sub_placeholder}
          items={
            this.state.main_cate === "portal"
              ? nul
              : this.state.main_cate === "uc"
              ? uc
              : isa  (Actually there is more, but i comfortably omit that)
          }
          onValueChange={(value, index) => {
            this.setState({
              sub_cate: value,
              text: items[index].label,          // this is the point !!!
            });
          }}
          value={this.state.sub_cate}
          //label={this.state.sub_cate}
        />
        <Text>{this.state.text}</Text>          // And I want to print text like this
      </View>
    );
  }
}

ハマスハッサン|

アイテムの代わりに、このようにuc配列を直接参照すると、インデックスがラベルを選択します。

 onValueChange={(value, index) => {
        this.setState({
          sub_cate: value,
          text: uc[index].label, // this is the point !!!
        });
      }}

完全なコード：

  const uc = [
      {
        label: "ucCollege",
        value: "uc",
      },
    ];
    const isa = [
      {
        label: "isaCollege",
        value: "isa",
      },
    ];
    const nul = [
      {
        label: "nulCollege",
        value: "nul",
      },
    ];
    export default class URL extends Component {
      constructor(props) {
        super(props);
        this.state = {
          main_cate: undefined,
          sub_cate: undefined,
          text: undefined,
        };
      }
      render() {
        return (
          <View>
            ...
            <RNPickerSelect
              placeholder={sub_placeholder}
              items={
                this.state.main_cate === "portal"
                  ? nul
                  : this.state.main_cate === "uc"
                  ? uc
                  : isa //(Actually there is more, but i comfortably omit that)
              }
              onValueChange={(value, index) => {
                this.setState({
                  sub_cate: value,
                  // instead of items you can directly refference your uc array like this
                  text: uc[index].label, // this is the point !!!
                });
              }}
              value={this.state.sub_cate}
              //label={this.state.sub_cate}
            />
            <Text>{this.state.text}</Text> // And I want to print text like this
          </View>
        );
      }

これがお役に立てば幸いです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]