You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, { Component } from 'react'; import './App.css';
class App extends Component { constructor(...stuff) { super(...stuff)
this.state = { wc: 0, goal: "", } }
render() { const pct = ((this.state.wc / (this.state.goal || 250)) * 100)
return ( <div className="App"> <textarea ref={this.onRef.bind(this)} onChange={this.onChange.bind(this)}></textarea> <div className="App-status"> <span>{this.state.wc}</span> <span> / </span> <span><input ref={this.onRef2.bind(this)} placeholder="250" onChange={this.onChange2.bind(this)} value={this.state.goal} /></span> <span>{ pct.toFixed(pct < 10 ? 1 : 0) }%</span> </div> </div> ); }
onRef(ta) { this.ta = ta }
onRef2(tb) { this.tb = tb }
onChange() { clearTimeout(this.timeout) this.timeout = setTimeout(() => { const wc = this.ta.value.split("\n").join(" ").split(" ").filter(t => t.length > 0).length this.setState({wc}) }, 100) }
onChange2() { let goal = parseInt(this.tb.value)
if (goal > 0) { this.setState({goal}) } else { this.setState({goal: ""}) } } }
export default App;
|