1

入力値を変更すると、スパン値が期待した変更と一致しませんでした。ここに私の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;
4

2 に答える 2

1

stateの値が変更されたときに再レンダリングされるように、React の機能を使用し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>

于 2016-12-26T09:32:06.090 に答える
0

typedコンポーネントの再レンダリングをトリガーしない変数を変更するためです。

コンポーネントのライフサイクルに関する反応チュートリアルを読む必要があります。コンポーネントの更新をトリガーするには、通常、状態を変更するか、新しいプロパティを渡す必要があります。

これはあなたのための実例です。

于 2016-08-08T04:45:29.107 に答える