Reactjs 为什么跨度值没有'；t在react.js中与输入绑定？

当我更改输入值时，范围值与预期的更改不匹配。 这是我的jsx文件：

import React from 'react';
import styles from './Avatar.less';
import { Input } from 'antd';

var typed = '';

function changed(e){
    console.log(typed);
    typed = e.target.value;
}

const Avatar = () => {
  return (
    <div className={styles.normal}>
     <span>{typed}</span>
     <Input onChange={changed.bind(this)} placeholder="text in" />
    </div>
  );
};

export default Avatar;

从“React”导入React；
从“/Avatar.less”导入样式；
从“antd”导入{Input}；
var类型=“”；
功能更改（e）{
控制台日志（已键入）；
typed=e.target.value；
}
const Avatar=（）=>{
返回(
{typed}
);
};
导出默认化身；

因为您更改了键入的

变量，该变量不会触发组件重新渲染

您需要阅读关于组件生命周期的react。要触发组件更新，通常需要更改状态或传递新属性

是您的工作示例。
使用React的
状态
功能，以便在
类型
的值更改时重新渲染。基本上，您的应用程序可以如下所示：


const{Input}=antd；
类Avatar扩展了React.Component{
构造函数（）{
超级（）；
this.state={style:'}；
}
onChange（e）{
this.setState（{typed:e.target.value}）；
}
render（）{
报税表（
{this.state.typed}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
.normal>*{
显示：块；
}

const Avatar=（）=>{}
和
类Avatar.Component{}
之间有什么不同？使用scaffold命令初始化项目，这是默认的代码样式。您的样式是函数样式，您将组件定义为函数。这也是一个很长的故事，但我要说的是，使用它是很好的。然而，在这种情况下，我们需要组件中的本地状态才能触发组件更新，在这种情况下，将组件定义为类更容易。这并没有什么不好的，这是一种非常常见的方法。如果您将状态存储在外部某个位置，您可以使用函数式，比如使用Redux或Flux架构，但在这一步中，最好是好好学习React。只有在这之后，我才会推荐学习Redux或Flux。非常感谢您的建议，这种功能性风格无法设置状态。一些答案解决了您的问题吗？