React編寫input組件傳參共用onChange

方法一

Input組件

1. let Input = React.createClass({
3. getInitialState: function() {
5. return { }
6. },
8. render: function() {
9. return (
10. <div className="inputwrapper">
11. <input type="text" placeholder={this.props.placeholder} onChange={this.props.vauleChange.bind(null,this.props.name)}/>
12. </div>
14. );
15. }
16. })

使用Input組件

1. let FormAdd = React.createClass({
3. getInitialState: function() {
5. return { }
6. },
8. submit:function(){
10. console.log(this.state);
12. },
14. vauleChange:function(name,e){
16. console.log(name+e.target.value);
17. this.setState({[name]: e.target.value})
18. },
20. render: function() {
22. return (
24. <div className="all">
25. <Input placeholder="請輸入你的姓名" name="name" vauleChange={this.vauleChange}></Input>
26. <Input placeholder="請輸入你的手機號" name="phone" vauleChange={this.vauleChange}> </Input>
27. <Input placeholder="請輸入你的微信號" name="wechat" vauleChange={this.vauleChange}></Input>
28. <Input placeholder="請輸入你的QQ號" name="qq" vauleChange={this.vauleChange}></Input>
29. <div className="rebtn" onClick={this.submit}></div>
30. </div>
32. </div>
34. );
35. }
36. })

方法二

Input組件

1. let Input = React.createClass({
3. getInitialState: function() {
5. return { }
6. },
8. render: function() {
10. return (
11. <div className="inputwrapper">
12. <input type="text" placeholder={this.props.placeholder} name={this.props.name} onChange={this.props.vauleChange}/>
13. </div>
15. );
16. }
17. })

使用Input組件

1. let FormAdd = React.createClass({
3. getInitialState: function() {
5. return { }
6. },
8. submit:function(){
10. console.log(this.state);
12. },
14. vauleChange:function(name,e){
16. this.setState({[e.target.name]: e.target.value});
18. /*下面這種方式也可以
19. var change = {};
20. change[e.target.name] = e.target.value;
21. this.setState(change);
22. */
23. },
25. render: function() {
27. return (
29. <div className="all">
30. <Input placeholder="請輸入你的姓名" name="name" vauleChange={this.vauleChange}></Input>
31. <Input placeholder="請輸入你的手機號" name="phone" vauleChange={this.vauleChange}> </Input>
32. <Input placeholder="請輸入你的微信號" name="wechat" vauleChange={this.vauleChange}></Input>
33. <Input placeholder="請輸入你的QQ號" name="qq" vauleChange={this.vauleChange}></Input>
34. <div className="rebtn" onClick={this.submit}></div>
35. </div>
37. );
38. }
39. })

注：setState({xxx:xxx}) 第一個參數默認會被認為是字符串，因為動態傳遞的是一個變量 要用[]中括號包裹