如何在 onChangeText 之后将文本输入值更改为零？答案

【问题标题】：How to change text input value into zero after onChangeText?如何在 onChangeText 之后将文本输入值更改为零？
【发布时间】：2019-08-08 08:15:10
【问题描述】：

我是 react native 的新手，我对文本输入和状态有疑问。

假设我制作了一个应用来购买自然材料，例如沙子。我有一个购买页面和一个交易组件。购买页面有一个购买按钮，然后转到下一步。并且购买页面内的交易组件有文本输入来输入用户想要购买的数量。状态来自父级（购买页面），我通过道具将其发送给它的子级（贸易组件）

我有一个文本输入来投标价格，让我们在 inputContainer 中调用。在它旁边，有一个沙子质量的只读文本输入，我们称之为 outputContainer。例如，假设 1 公斤沙子的价格为 10 美元。所以，当我在 inputContainer 中输入 100（美元）时，onchangetext 对 outputContainer 起作用并返回 10 kg。

问题是当我删除值 inputContainer 直到什么都没有时， outputContainer 返回 NaN。我想要的是删除所有输入后，inputContainer 自动返回 0 所以 outputContainer 也返回 0

购买 page.js

state = {
 inputTextValue: '',
 outputTextValue: ''
}

onChangeValue = inputValue => {
const qty = ParseInt(inputValue) / 10
if (inputValue === '') {
      this.setState({
        inputTextValue: '0'
      });
    } else {
      this.setState({
        inputTextValue: inputValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.')
        outputTextValue: qty.toString()
      });
    }
}

render(){
  return (
   <View>
    <Trade
      onChange={this.onChangeValue}
      inputText={this.state.inputTextValue}
      outputText={this.state.outputTextValue}
    />
   </View>
  )
}

在 trade.js 中

type Props = {
  inputText?: String,
  outputText?: String
}

class Trade extends PureComponent<Props> {
  static defaultProps = {
    inputText: '',
    outputText: '',
    onChange: () => {}
  }

  render(){
    const { inputText, outputText, onChange } = this.props;
    return(){
       <View>
         <TextInput
          onChangeText={onChange}
          value={inputText}
         />
         <TextInput
          onChangeText={onChange}
          value={outputText}
          editable={false}
         />
       </View>
    }
  }
}

从上面的代码中我得到的是我确实返回了 0，但是当我想输入一个新的输入时，0 仍然在文本输入的前面。

好吧，让我向您展示我使用该代码时的流程：

输入输入

输入：100输出：10
删除输入

输入：0输出：0
再次键入 输入：0100 输出：（忽略这个）

我想要的数字 3 是 => 当我输入 100 时输入：100

我怎样才能做到这一点？谢谢

【问题讨论】：

标签： react-native react-native-textinput

【解决方案1】：

你可以试试这个

      this.setState({
        inputTextValue: '0',
        outputTextValue: '0'
      });

【讨论】：

【解决方案2】：

您必须将 Input 和 Output 的值放入 state 并初始将它们的值设置为 '0'

【讨论】：