淺談React實現輸入框

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

組件要實現的功能：

1、定製label和輸入框的placeholder的內容；

2、輸入的內容不符合Regex要求時，輸入框標紅，符合時標綠；

3、點擊清除按鈕後，按鈕消失並清除輸入框內容；

4、對外開放3個方法：擷取、設定、刪除輸入框的內容（trim）。

inputBox.html：

<!DOCTYPE html><html><head><link rel="stylesheet" href="inputBox.css"><script src="build/react.js"></script><script src="build/react-dom.js"></script><script src="build/browser.min.js"></script></head><body><div id="inputBox"></div><script type="text/babel" src="inputBox.jsx"></script></body></html>

inputBox.jsx：

var grades = [{team: "Team1", name: "Alice", grade: 80},{team: "Team1", name: "Bruce", grade: 90},{team: "Team1", name: "Cindy", grade: 50},{team: "Team2", name: "David", grade: 40},{team: "Team2", name: "Emy", grade: 60},{team: "Team2", name: "Fruid", grade: 70}];var FilterBox = React.createClass({getInitialState: function() {return {inputText: "",showPassingOnly: false};},filter: function(inputText, showPassingOnly) {this.setState({inputText: inputText,showPassingOnly: showPassingOnly});},render: function() {return (<div><SearchBox onInput={this.filter} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} /><GradeList grades={this.props.grades} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} /></div> );}});var SearchBox = React.createClass({filter: function() {this.props.onInput(this.refs.input.value,this.refs.checkbox.checked);},render: function() {return (<form><input id="text" type="text" ref="input" placeholder="Sreaching..." onChange={this.filter} value={this.props.inputText}/><br/><input type="checkbox" ref="checkbox" checked={this.props.showPassingOnly} onChange={this.filter}/>Only show passing grades</form>);}});var GradeList = React.createClass({render: function() {var rows = [];var teams = [];this.props.grades.forEach(function(grade, index) {if (grade.name.toLowerCase().indexOf(this.props.inputText) == -1 || this.props.showPassingOnly && grade.grade < 60)return;if (teams.indexOf(grade.team) == -1) {rows.push(<Team team={grade.team} key={"team" + index}></Team>);teams.push(grade.team);}rows.push(<Grade name={grade.name} grade={grade.grade} key={"grade" + index}></Grade>);}.bind(this));if (rows.length == 0) rows.push(<tr key={"noMatches"}><td colSpan="2">No matches!</td></tr>);return (<table><thead><tr><th>Name</th><th>Grade</th></tr></thead><tbody>{rows}</tbody></table>);}});var Team = React.createClass({render: function() {return (<tr><td colSpan="2">{this.props.team}</td></tr>);}});var Grade = React.createClass({render: function() {return (<tr><td>{this.props.name}</td><td>{this.props.grade}</td></tr>);}});ReactDOM.render(<FilterBox grades={grades} />,document.getElementById('filterBox'));

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More