父子组件数据关系与数据提升

状态提升

两个组件（无父子关系）同享一个数据并且同步数据变化

// 状态提升 - 两个组件（非父子关系）同享一个数据并同步数据变化
class Info extends React.Component {
  render() {
    return (
      <div>
        <p>第{ this.props.inputNum }号</p>
        <p>输入长度:&nbsp; { this.props.username.length }</p>
        <p>提示:&nbsp;
          {
            this.props.username.length < 6
              ? '长度必须大于等于6'
              : this.props.username.length >= 6 &&
                (
                  this.props.username.length <= 12
                    ? '长度合法'
                    : '长度必须小于12'
                )
          }
        </p>
      </div>
    )
  }
}

// function Info(props) {
//   return (
//     <div>
//       <p>第{ props.inputNum }号</p>
//       <p>输入长度:&nbsp; { props.username.length }</p>
//       <p>提示:&nbsp;
//         {
//           props.username.length < 6
//             ? '长度必须大于等于6'
//             : props.username.length >= 6 &&
//               (
//                 props.username.length <= 12
//                   ? '长度合法'
//                   : '长度必须小于12'
//               )
//         }
//       </p>
//     </div>
//   )
// }

class UserNameInput extends React.Component {
  render() {
    return (
      <div>
        <Info username={ this.props.username } inputNum={ this.props.inputNum } />
        <div>
        <input type="text" value={ this.props.username } onChange={ (e) => this.props.handleUsernameChange(e) } />
        </div>
      </div>
    )
  }
}

// function UserNameInput(props) {
//   const [ username, setUsername ] = React.useState('');
//   // const handleUsernameChange = (e) => {
//   //   setUsername(e.target.value);
//   // }
//   return (
//     <div>
//       <Info username={ username } inputNum={ props.inputNum } />
//       <div>
//       {/* <input type="text" onChange={ (e) => handleUsernameChange(e) } /> */}
//       <input type="text" onChange={ (e) => setUsername(e.target.value) } />
//       </div>
//     </div>
//   )
// }

class App extends React.Component {
  state = {
    username: ''
  }
  handleUsernameChange(e) {
    this.setState({
      username: e.target.value
    })
  }
  render() {
    return (
      <div>
        <UserNameInput inputNum={ 1 } username={ this.state.username } handleUsernameChange={ this.handleUsernameChange.bind(this) } />
        <UserNameInput inputNum={ 2 } username={ this.state.username } handleUsernameChange={ this.handleUsernameChange.bind(this) } />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));