reactjs - React JSX 与变量中的组件不同步 Prop

Question

Scegli组件分配给应用程序 comp变量，然后在 App 中呈现 render作为变量。但是，分配的 Prop 不起作用:如果我在输入框中键入，则该值被卡住。
我究竟做错了什么？
如果我只是移动 <Scegli>...</Scegli>直接进入渲染(不分配给变量)它按预期工作。
App.js

import React, { Component } from 'react';
import './App.css';
import Scegli from './components/Scegli';

class App extends Component {
  constructor() {
    super();
    this.state = {
      valore: 'Single'
    }
    this.comp = <Scegli value={this.state.valore} handleChange={this.setValoreHandler} />;
  }

  setValoreHandler = e => {
    this.setState({
      valore: e.target.value
    });
  }

  render() {
    return (
      <div>
          {this.comp}
      </div>
    );
  }
}

export default App;

Scegli.js

import React, { Component } from 'react';

class Scegli extends Component {
  render() {
    return (
      <div>
        <input value={this.props.value} onChange={this.props.handleChange} />
        Valore scelto: {this.props.value}
      </div>
    );
  }
}

export default Scegli;

Answer 1

this.comp在组件的挂载处声明一次并保持该状态。您不会在任何地方更新/重新渲染它，这就是它保持不变的原因。

You could either:

直接移动 JSX 组件来渲染:

<div>
    <Scegli value={this.state.valore} handleChange={this.setValoreHandler} />
</div>

或者

每次输入更改时更新类变量(虽然不推荐):

setValoreHandler = (e) => {
    this.comp = <Scegli value={e.target.value} handleChange={this.setValoreHandler} />;
    this.forceUpdate();
}