Javascript 反应本机变量与状态

我正在尝试创建一个简单的添加应用程序，动态更新。我想我成功了，但我仍在努力理解美国。为什么

文本

s必须是一个状态，而

结果

却不是，即使它一直在更新

import React from 'react';
import { StyleSheet, TextInput, StatusBar, Text, View } from 'react-native';
import Constants from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {text1: null, text2: null};
  }


  render() {
    var result = parseInt(this.state.text1) + parseInt(this.state.text2);
    return (
      <View style={styles.container}>
        <TextInput
        keyboardType="numeric"
        style={{height: 40}}
        placeholder="First"
        onChangeText={(text1) => this.setState({text1})}
        />
        <TextInput
        keyboardType="numeric"
        style={{height: 40}}
        placeholder="Second"
        onChangeText={(text2) => this.setState({text2})}
        />
        <Text>{this.state.text1&&this.state.text2 ? result : "Result will appear here."}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

从“React”导入React；
从“react native”导入{样式表、文本输入、状态栏、文本、视图}；
从“expo”导入常量；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={text1:null，text2:null}；
}
render（）{
var result=parseInt（this.state.text1）+parseInt（this.state.text2）；
返回(
this.setState（{text1}）}
/>
this.setState（{text2}）
/>
{this.state.text1&&this.state.text2？结果：“结果将出现在这里。”}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”
},
});

在上面的示例中，您的输入与组件状态相关联，而您的结果来自该状态

若你们想把“结果”也存储在这个州，从技术上讲你们可以，但你们正在为自己设置一个可能出错的地方。见下文：

import React from 'react';
import { StyleSheet, TextInput, StatusBar, Text, View } from 'react-native';
import Constants from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {text1: null, text2: null, result: null};
  }


  render() {
    return (
      <View style={styles.container}>
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="First"
          onChangeText={(text1) => this.setState(state => ({
            text1,
            result: parseInt(text1) + parseInt(state.text2)
          }))}
        />
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="Second"
          onChangeText={(text2) => this.setState(state => ({
            text2,
            result: parseInt(text2) + parseInt(state.text1)
          }))}
        />
        <Text>{this.state.result || "Result will appear here."</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

从“React”导入React；
从“react native”导入{样式表、文本输入、状态栏、文本、视图}；
从“expo”导入常量；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={text1:null，text2:null，result:null}；
}
render（）{
返回(
this.setState（state=>({
文本1，
结果：parseInt（text1）+parseInt（state.text2）
}))}
/>
this.setState（state=>({
文本2，
结果：parseInt（text2）+parseInt（state.text1）
}))}
/>
{this.state.result | |“结果将显示在此处。”
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”
},
});

---

希望这有意义！你最初的做法是更好的做法

在上面的示例中，您的输入绑定到组件状态，而您的结果是从该状态派生的

若你们想把“结果”也存储在这个州，从技术上讲你们可以，但你们正在为自己设置一个可能出错的地方。见下文：

import React from 'react';
import { StyleSheet, TextInput, StatusBar, Text, View } from 'react-native';
import Constants from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {text1: null, text2: null, result: null};
  }


  render() {
    return (
      <View style={styles.container}>
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="First"
          onChangeText={(text1) => this.setState(state => ({
            text1,
            result: parseInt(text1) + parseInt(state.text2)
          }))}
        />
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="Second"
          onChangeText={(text2) => this.setState(state => ({
            text2,
            result: parseInt(text2) + parseInt(state.text1)
          }))}
        />
        <Text>{this.state.result || "Result will appear here."</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

从“React”导入React；
从“react native”导入{样式表、文本输入、状态栏、文本、视图}；
从“expo”导入常量；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={text1:null，text2:null，result:null}；
}
render（）{
返回(
this.setState（state=>({
文本1，
结果：parseInt（text1）+parseInt（state.text2）
}))}
/>
this.setState（state=>({
文本2，
结果：parseInt（text2）+parseInt（state.text1）
}))}
/>
{this.state.result | |“结果将显示在此处。”
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”
},
});

---

希望这有意义！你最初的做法是更好的做法

React组件设计为基于状态或道具更改进行刷新。默认情况下，当您没有在

shouldComponentUpdate

中定义自己的限制时，所有状态或道具更改都将触发组件重新渲染

重新渲染意味着组件将执行其

render

方法。DOM是否更新由虚拟差异引擎处理

因此，通过调用

setState

响应

onChangeText

，您告诉组件您要进行状态更改。因此，将创建状态的新版本并触发组件更新，从而调用渲染方法。然后是渲染方法，它根据新版本状态中的文本更改为

result

构造值

最后，回答你的问题

text1

和

text2

的值必须是状态的一部分，才能触发组件更新。此外，还可以在渲染之间存储这些值

---

result

的值是从状态派生的，即从状态值进行解析、串联。

result

的值从不存储在任何地方，而是在呈现组件时根据需要生成。

React组件设计为基于状态或属性更改进行刷新。默认情况下，当您没有在

shouldComponentUpdate

中定义自己的限制时，所有状态或道具更改都将触发组件重新渲染

重新渲染意味着组件将执行其

render

方法。DOM是否更新由虚拟差异引擎处理

因此，通过调用

setState

响应

onChangeText

，您告诉组件您要进行状态更改。因此，将创建状态的新版本并触发组件更新，从而调用渲染方法。然后是渲染方法，它根据新版本状态中的文本更改为

result

构造值

最后，回答你的问题

text1

和

text2

的值必须是状态的一部分，才能触发组件更新。此外，还可以在渲染之间存储这些值

---

result

的值是从状态派生的，即从状态值进行解析、串联。

result

的值从不存储在任何地方，而是在呈现组件时根据需要生成。

谢谢！但有一件事是，“或”（

|

）是做什么的？我想在onChangeText上调用2个事件是不可能的。我