Warum wurde der Span-Wert nicht mit der Eingabe in react.js verknüpft?

Question

Wenn ich den Eingabewert änderte, stimmte der Span-Wert nicht mit meiner erwarteten Änderung überein. hier ist meine jsx Datei:

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

Da Sie eine typed Variable ändern, die nicht Komponente erneutes Rendern auslöst.

Sie müssen die Reaktion tutorial über eine Komponente Lebenszyklus lesen. Zum Auslösen eines Komponentenupdates müssen Sie normalerweise den Status ändern oder neue Eigenschaften übergeben.

Here ist ein funktionierendes Beispiel für Sie.

Answer 2

Verwenden Sie die state-Funktion von React, damit es erneut rendert, wenn sich der Wert type ändert. Grundsätzlich Ihre Anwendung könnte wie folgt aussehen:

const {Input} = antd; 
 

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

 
ReactDOM.render(
 
\t <Avatar/>, 
 
\t 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>