Skip to content

Commit 270b2f8

Browse files
WscatsWscats
committed
edit md
1 parent 8b9f7ea commit 270b2f8

2 files changed

Lines changed: 94 additions & 1 deletion

File tree

‎react/component/src/form/README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ class Component1 extends React.Component{
5454

5555
- [input表单输入](https://wscats.github.io/react-tutorial/react/component/src/form/input.html)
5656

57+
5758
## textarea 元素
5859
在普通 HTML 中，`textarea` 元素是节点文本值
5960
```html
@@ -138,4 +139,8 @@ class Component1 extends React.Component{
138139
)
139140
}
140141
}
141-
```
142+
```
143+
144+
### 效果预览
145+
146+
- [select,input,textarea表单输入](https://wscats.github.io/react-tutorial/react/component/src/form/表单.html)

‎react/component/src/form/表单.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<style>
13+
.red{
14+
color:red
15+
}
16+
</style>
17+
<div id="demo">
18+
19+
</div>
20+
<!--React 核心库-->
21+
<script src="../../../js/react.js"></script>
22+
<!--React 跟 Dom 相关的功能库-->
23+
<script src="../../../js/react-dom.js"></script>
24+
<!--jsx 转换 js 的框架 babel-->
25+
<script src="../../../js/browser.min.js"></script>
26+
<!-- ES6 JSX -->
27+
<script type="text/babel">
28+
class Xform extends React.Component {
29+
constructor(props){
30+
super(props)
31+
this.props = props;
32+
this.state = {
33+
inputValue:"",
34+
selectValue:"1",
35+
textareaValue:""
36+
};
37+
}
38+
getInputValue(e){
39+
console.log(e.target.value)
40+
this.setState({
41+
inputValue:e.target.value
42+
})
43+
}
44+
getSelectValue(e){
45+
console.log(e.target.value)
46+
this.setState({
47+
selectValue:e.target.value
48+
})
49+
}
50+
getTextareaValue(e){
51+
console.log(e.target.value)
52+
this.setState({
53+
textareaValue:e.target.value
54+
})
55+
}
56+
// V->M
57+
// 视图驱动模型
58+
render() {
59+
return (
60+
<div>
61+
<p className="red">1.获取input输入的值</p>
62+
<input onChange={this.getInputValue.bind(this)} />
63+
64+
<p className="red">2.获取select输入的值</p>
65+
<select onChange={this.getSelectValue.bind(this)}>
66+
<option value="1">电脑</option>
67+
<option value="2">手机</option>
68+
<option value="3">平板</option>
69+
</select>
70+
71+
<p className="red">3.获取textarea输入的值</p>
72+
<p>{this.state.textareaValue}</p>
73+
<textarea onChange={this.getTextareaValue.bind(this)}></textarea>
74+
</div>
75+
);
76+
}
77+
}
78+
ReactDOM.render(
79+
<div>
80+
<Xform />
81+
</div>,
82+
document.querySelector("#demo")
83+
)
84+
85+
</script>
86+
</body>
87+
88+
</html>

0 commit comments

Comments
 (0)