技術標籤：reactreactjavascriptreactjs

實現效果如下：

簡易程式碼如下

class App extends Component{
  constructor(){
    super()
    this.state={
      xing:'',
      ming:''
    }
  }
  //方法
  handleInputChange=(e)=>{//這裡如果不用箭頭函式的話，this就不指向元件了，需要注意
    console.log(e.target);   //表示是 當前的dom物件 input
    console.log(e.target.
 
name);  //xing
    console.log(e.target.value); //ming
    this.setState({
      [e.target.name]:e.target.value    //前面是this.setState這個物件中的key  陣列表示的是這個key一個變數 
    })
  }

  //render
  render(){
    const {xing,ming}=this.state  //解構賦值 不使用也可以，不過後續使用的字首要加this.state
    return (
      <div>
        {/* 姓 */
 
}
        <label>
          <span>姓：</span>
          <input type="text" name="xing" value={xing} onChange={this.handleInputChange}></input>
        </label>
        {/* 名 */}
        <label>
          <span>名：</span>
          <
 
input type="text" name="ming" value={ming} onChange={this.handleInputChange}></input>
        </label>
    <p>歡迎：{xing}{ming}</p>
      </div>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.querySelector("#root")
)