reactjs - 为什么跨度值没有与 react.js 中的输入绑定？

Question

当我更改输入值时，跨度值与我预期的更改不匹配。这是我的 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;

Answer 1

使用 React 的功能，以便在值更改state时重新渲染。type基本上，您的应用程序可能如下所示：

const {Input} = antd;

class Avatar extends React.Component {
	constructor() {
		super();
		this.state = {style: ''};
	}
	onChange(e) {
		this.setState({typed: e.target.value});
	}
	render() {
		return ( 
			<div className="normal">
				<span>{this.state.typed}</span>
				<Input onChange={this.onChange.bind(this)} placeholder="text in" />
			</div>
		);
	}
}

ReactDOM.render(
	<Avatar/>,
	document.getElementById('app')
);

.normal > * {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/antd/dist/antd.js"></script>

<div id="app"></div>

Answer 2

因为您更改了一个typed变量，这不会触发组件重新渲染。

您需要阅读有关组件生命周期的反应教程。为了触发组件更新，您通常需要更改状态或传递新属性。

这是一个适合您的工作示例。