时间戳

首页 > 解决方案 > 如何制作回调函数以填充 textinput onChangeText 的 value 属性

javascript - 如何制作回调函数以填充 textinput onChangeText 的 value 属性

问题描述

在这段代码中，我想要实现的只是在 Textinput 的 value 属性中获取类型化的值。但是，我得到的是空的。AsetState是异步的，我落后了一步。我是反应新手，我不知道如何制作一个可以给我当前值的回调函数。

我也希望以后使用地图，并制作动态表格，我很欣赏可能适用于地图功能的解决方案。

谢谢

import React from 'react';
import {
  View,
  TextInput,
} from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Email: null,
      Password: null,
      Address: null,
    };
  }

  EnterValue = (name) => {
    return (text) => {
      this.setState({
        [name]: text,
        
      });
    };
  };

  render() {
    return (
      <View>
        <TextInput
          placeholder="enter email"
          value={this.state.Email}
          onChangeText={this.EnterValue('Email')}
          style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
        />

        <TextInput
          placeholder="Password"
          value={this.state.Password}
          onChangeText={this.EnterValue('Password')}
          style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
        />

        <TextInput
          placeholder="Address"
          value={this.state.Address}
          onChangeText={this.EnterValue('Address')}
          style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
        />
      </View>
    );
  }
}

标签： javascriptreactjsreact-nativereact-reduxreact-router

解决方案

我会做这样的事情

onChangeText={(e) => this.EnterValue(e.target.value, 'Email')}

（我对 e.target.value 没有信心，如果它为 null 或未定义，请传递 e.target 并记录它，看看你可以从中获得什么值）

然后使用以下内容更改您的功能

EnterValue = (value, inputName) => this.setState({ [inputName]: value});

推荐阅读