資訊專欄INFORMATION COLUMN
摘要：今天來講講的表單元素。在中，并不使用之前的屬性，而在根標簽上用屬性來表示選中項。多個輸入的解決方法當你有處理多個受控的元素時，你可以通過給每個元素添加一個屬性，來讓處理函數(shù)根據(jù)的值來選擇做什么。
今天來講講react的表單元素。
受控元素
下面來看一下如何獲取輸入框的值
import React, { Component } from "react";
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:"請輸入...",
inputV:""
}
};
inp(e){
this.setState({
inputV:e.target.value {/* 通過事件細節(jié)改變inputV的值*/}
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (
{/*此處的main是來自父組件的傳值*/}
)
}
}
export default Trem;
代碼解讀：
this.inp = this.inp.bind(this); 綁定inp函數(shù)this指向
this.state 初始化變量
inp() 監(jiān)聽input的輸入值
this.state.inputV 通過賦值獲取input的value
textarea 標簽
import React, { Component } from "react";
class Trem extends React.Component {
constructor(props){
super(props);
this.inp = this.inp.bind(this);
this.sub = this.sub.bind(this);
this.state = {
place:"請輸入...",
inputV:""
}
};
inp(e){
this.setState({
inputV:e.target.value
});
console.log(e.target.value)
};
sub(){
console.log(this.state.inputV)
};
render(){
return (