持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
一、react---获取react中组件的dom元素内容-----(自定义属性 data-xxx +e.target.dataset.xxx )
==自定义属性==
<title>获取表单数据</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
skills: "",
desc: "",
};
this.keyUpHandle = this.keyUpHandle.bind(this);
}
keyUpHandle(e) {
// console.log(e.target.dataset.id);
const obj = {};
obj[e.target.dataset.id] = e.target.value;
this.setState(obj);
}
render() {
return (
<ul>
<li>
<input
onKeyUp={this.keyUpHandle}
data-id="name"
type="text"
placeholder="请输入名字"
/>
</li>
<li>
<input
onKeyUp={this.keyUpHandle}
data-id="desc"
type="text"
placeholder="请输入简介"
/>
</li>
<li>
<input
onKeyUp={this.keyUpHandle}
data-id="skills"
type="text"
placeholder="请输入技能"
/>
</li>
<li>
<button
onClick={() => {
console.log(this.state);
}}
>
提交
</button>
</li>
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
二、react--获取react中组件的dom元素内容-ref操作--this.refs+ref（分别为 function 和class中的ref使用）
ref属性
class定义的组件中可以使用this.refs
function定义的组件中可以使用useRef
受控组件和非受控组件
从两者的使用情况来看，function明显比class使用起来 更方便简单
==react---class中this.refs + ref的使用==
<title>ref操作</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
skills: "",
desc: "",
};
}
render() {
return (
<ul>
<li>
<input ref="name" type="text" placeholder="请输入名字" />
</li>
<li>
<input ref="desc" type="text" placeholder="请输入简介" />
</li>
<li>
<input ref="skills" type="text" placeholder="请输入技能" />
</li>
<li>
<button
onClick={() => {
// 非受控组件，组件的数据不受state状态管理,在获取的时候直接通过ref属性进行获取
// 受控组件
console.log(this.refs);
this.refs.name.style.color = "red";
console.log(this.refs.name.value);
console.log(this.refs.skills.value);
console.log(this.refs.desc.value);
}}
>
提交
</button>
</li>
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
==react---function中this.refs + ref的使用==
<title>ref-function操作</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { useRef } = React;
function App() {
const name = useRef(); // 可以为标签定义个一个ref属性，在组件中直接获取他的内容
const desc = useRef();
const skills = useRef();
return (
<ul>
<li>
<input ref={name} type="text" placeholder="请输入名字" />
</li>
<li>
<input ref={desc} type="text" placeholder="请输入简介" />
</li>
<li>
<input ref={skills} type="text" placeholder="请输入技能" />
</li>
<li>
<button
onClick={() => {
console.log(name.current.value);
console.log(desc.current.value);
console.log(skills.current.value);
}}
>
提交
</button>
</li>
</ul>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
同上效果一样，只不过不用ref
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script src="./libs/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
function App() {
const [name, setName] = useState();
const [desc, setDesc] = useState();
const [skills, setSkills] = useState();
return (
<div>
<ul>
<li>
<input
onKeyUp={(e) => setName(e.target.value)}
type="text"
placeholder="请输入名字"
/>
</li>
<li>
<input
onKeyUp={(e) => setDesc(e.target.value)}
type="text"
placeholder="请输入个人简介"
/>
</li>
<li>
<input
onKeyUp={(e) => setSkills(e.target.value)}
type="text"
placeholder="请输入技能"
/>
</li>
</ul>
<button
onClick={() => {
console.log(name);
console.log(desc);
console.log(skills);
}}
>
提交
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
