Enable "Add" button only when "Name" and "URL" is filled out

This commit is contained in:
Yuya Ochiai
2016-03-10 23:25:35 +09:00
parent f729054f36
commit 97808373ed

View File

@@ -169,8 +169,8 @@ var TeamListItemNew = React.createClass({
console.log('submit'); console.log('submit');
e.preventDefault(); e.preventDefault();
this.props.onTeamAdd({ this.props.onTeamAdd({
name: this.state.name, name: this.state.name.trim(),
url: this.state.url url: this.state.url.trim()
}); });
this.setState(this.getInitialState()); this.setState(this.getInitialState());
}, },
@@ -186,6 +186,9 @@ var TeamListItemNew = React.createClass({
url: e.target.value url: e.target.value
}); });
}, },
shouldEnableAddButton: function() {
return (this.state.name.trim() !== '') && (this.state.url.trim() !== '');
},
render: function() { render: function() {
return ( return (
<ListGroupItem> <ListGroupItem>
@@ -202,7 +205,7 @@ var TeamListItemNew = React.createClass({
<input type="url" className="form-control" id="inputTeamURL" placeholder="http://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } /> <input type="url" className="form-control" id="inputTeamURL" placeholder="http://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } />
</div> </div>
{ ' ' } { ' ' }
<Button type="submit">Add</Button> <Button type="submit" disabled={ !this.shouldEnableAddButton() }>Add</Button>
</form> </form>
</ListGroupItem> </ListGroupItem>
); );