Hello.js 1016 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import React from "react";
  2. import Input from "./Input";
  3. import Button from "./Button";
  4. export default class Form extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. name: "",
  9. color: this.props.color
  10. },
  11. this.onChange = this.onChange.bind(this);
  12. }
  13. onChange(event) {
  14. this.setState({
  15. name: event.target.value
  16. });
  17. }
  18. render() {
  19. let bgColor = {
  20. 'backgroundColor': this.props.color
  21. };
  22. return (
  23. <div style={bgColor}>
  24. <form>
  25. <label>
  26. Name:
  27. <Input type="text" onChange={this.onChange} value={this.state.name} />
  28. </label>
  29. <Button onClick={() => this.props.newName(this.state.name)} text="Hello" />
  30. <Button onClick={() => this.props.newBackground(this.props.color)} text="CSS" />
  31. <div>Hello {this.props.name}!</div>
  32. </form>
  33. </div>
  34. );
  35. }
  36. }