我在React工作中工作了2个小时，我对编写者如何正确分离组件存在疑问，例如我有这些窗口

当我单击“设置”按钮时，我会更改值this.state.nameFramework，如果我将所有代码都写在App组件中，我的helloApp会正常工作，但是如果我将代码写在单独的组件中，则不会立即生效但是为了更改变量this.state.nameframework的值，我重新加载了页面。

我的代码

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';
import InputFramework from 'components/InputFramework';
import ListPerson from 'components/ListPerson';

const list = [
  {
    objectID: 1,'name': 'Vincenzo','surname': 'Palazzo'
  },{
    objectID: 2,'name': 'Sara','surname': 'Durante'
  }
];

let name = 'Vincent';
let nameFramework = 'React';

class AppComponent extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list,name,nameFramework
    };

    this.onSelectPerson = this.onSelectPerson.bind(this);
    this.onSubmitText = this.onSubmitText.bind(this);
    this.onChangeNameFramework = this.onChangeNameFramework.bind(this);
  }

  onSubmitText(){
    this.setState({nameFramework: this.state.nameFramework});
  }

  onChangeNameFramework(name){
    this.state.nameFramework = name;
  }

  onSelectPerson(name) {
    this.setState({name: name});
  }

  render() {
    //This is no good for my programmer style,resolve it please
    return (
      <div classname="index">
        <InputFramework
                  name={this.state.name}
                  nameFramework={this.state.nameFramework}
                  onChange={this.onChangeNameFramework}
                  onClick={this.onSubmitText}
        />
        <ListPerson
          onClick={this.onSelectPerson}
        list={this.state.list}/>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

输入组件

    require('normalize.css/normalize.css');
    require('styles/App.css');

    import React from 'react';


    class InputFramework extends React.Component {

      constructor(props){
        super(props);
      }

      render() {
        //This is no good for my programmer style,resolve it please
        //The nameFramework not update
        let {onChange,onClick,name} = this.props;
        return (
          <div classname='index'>
            <h1>Hello my name is {name} and I'm learning {this.props.nameFramework}</h1>
            <from>
              <input type='text'
                     onChange={event => onChange(event.target.value)}/>
              <button type='submit' onClick={() => onClick}>Set</button>
            </from>
          </div>
        );
      }
    }

    InputFramework.defaultProps = {};

    export default InputFramework;

列表组件

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';

class ListPerson extends React.Component {

  constructor(props){
    super(props);

  }

  render() {
    //This is no good for my programmer style,resolve it please
    const {onClick,list} = this.props;
    return (
      <div classname="index">
        <ul>
          {list.map(function(item){
            return (
              <li key={item.objectID}>
                {item.name}
                <button type='button' onClick={() => onClick(item.name)}>Select</button>
              </li>
            )
          })}
        </ul>
      </div>
    );
  }
}

ListPerson.defaultProps = {
};

export default ListPerson;

我这是如何编写代码的问题，现在我问你，你比我有更多的经验，你能不能帮助我迷路。