0

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

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

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

问题是当我删除值 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 仍然在文本输入的前面。

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

  1. 输入输入

    输入：100 输出：10

  2. 删除输入

    输入：0 输出：0

  3. 再次 输入输入：0100 输出：（忽略此）

我在数字 3 中想要的是 => input: 100 当我输入 100

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

4

2 回答 2

0

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

于 2019-08-08T09:21:22.187 回答
0

你可以试试这个

      this.setState({
        inputTextValue: '0',
        outputTextValue: '0'
      });
于 2019-08-08T08:33:19.423 回答