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

【问题标题】：Why the span value didn't bind with input in react.js?为什么跨度值没有与 react.js 中的输入绑定？
【发布时间】：2016-08-08 04:35:27
【问题描述】：

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

【问题讨论】：

部分答案是否解决了您的问题？

标签： reactjs antd

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

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