【问题标题】:How to make a call back function to populate value prop of textinput onChangeText如何制作回调函数以填充 textinput onChangeText 的 value 属性
【发布时间】:2021-01-17 19:23:46
【问题描述】:

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

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

谢谢

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>
    );
  }
}

【问题讨论】:

  • 您是说在EnterValue 函数中返回的函数内部,text 的计算结果为null
  • 可能对您的情况有所帮助:reactjs.org/docs/…
  • @weltschmerz 感谢您的指出。固定的。它应该选择名称参数
  • @Dom 谢谢。在我的情况下如何在 setState 中实现函数
  • 如果您自己找到解决方案,请回答您自己的问题

标签: javascript reactjs react-native react-redux react-router


【解决方案1】:

我会做这样的事情

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

(我对 e.target.value 没有信心,如果它为 null 或未定义,请传递 e.target 并记录它,看看你能从中得到什么值)

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

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

【讨论】:

  • @Axel ,感谢您的努力。我试过了。它不起作用。我猜事件只用于 onChange 道具,而不是 onChangeText。但它没有给我错误。所以我不确定。问题仍然存在:)
  • 尝试这样做:onChangeText={(e) => this.EnterValue(e, 'Email')};并且 console.log 是 EnterValue 函数中的第一个参数。这可能不是一个事件,我对 react-native 并没有真正的经验。如果它不是一个事件,它可以是值本身,这样你的问题就会得到解决
  • @Axel。谢谢。请查看我的回复,感谢您的努力
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-03
  • 2021-02-11
  • 1970-01-01
  • 2017-06-10
  • 2020-03-06
  • 1970-01-01
相关资源
最近更新 更多