reactjs - 如何在 react 中返回用户输入？

Question

我是 React 和一般编码的新手，我正在尝试构建这个简单的抽认卡应用程序以更好地理解 React。我知道这段代码非常糟糕，它可能应该被分解成更多的组件，但我不知道如何将事件处理程序添加到提交按钮，这将创建一个闪卡，一侧有定义，术语另一方面，当单击卡片时，它会从定义变为术语。感谢任何反馈，如果这个问题很愚蠢，我提前道歉。

class flashcard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      definition: "",
      term: "",
    };
  }
  createCard = () => {
    this.setState({
      definition: "test",
    });
  };

  render() {
    return (
      <div>
        <Navbar bg="primary" variant="dark">
          <Navbar.Brand>Flashcard</Navbar.Brand>
          <Nav className="mr-auto">
            <Button style={this.buttonstyles} variant="outline-light">
              Add Card
            </Button>
          </Nav>
        </Navbar>
        <Card style={this.styles}>
          <Card.Img variant="top" />
          <Card.Body>
            <Form>
              <Form.Group controlId="formBasicEmail">
                <Form.Label>definition</Form.Label>
                <Form.Control type="definition" placeholder="definition" />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label>term</Form.Label>
                <Form.Control type="term" placeholder="term" />
              </Form.Group>
              <Button variant="primary" type="submit" onClick={this.createCard}>
                Submit
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <Button style={this.previoussytle} variant="primary">
          Previous
        </Button>
        <Button style={this.nextsytle} className="m-2" variant="primary">
          Next
        </Button>
      </div>
    );
  }

Answer 1

您可以通过多种方式构建它，使用或不使用表单。我选择使用表格和 controlled components处理<input>元素。

使用这种布局，我们需要为每张卡片跟踪三个项目:

• 术语(字符串)
• 定义(字符串)
• 翻转( bool 值)

所有这三个项目都将在一个看起来像这样的卡片对象中:

{
  term: 'vcs',
  definition: 'version control system',
  flipped: false
}

我们还需要一个空数组来存储所有卡片。所以应用程序的初始状态将如下所示:

state = {
  term: "",
  definition: "",
  cards: []
};

term和 definition使用 handleChange 更新事件处理程序。

提交术语和定义时(通过 handleSubmit )，卡片将添加到 cards数组。

事件处理程序 handleClick将处理 flipped 的切换每张卡的属性。

然后我们可以使用 conditional rendering显示每张卡片的术语或定义。

{c.flipped ? c.definition : c.term}

工作示例:

class App extends React.Component {
  state = {
    term: "",
    definition: "",
    cards: []
  };
  
  // Set state for input elements using "Computed property names"
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  // Toggle each card
  handleClick = index => {
    const updatedCards = this.state.cards;
    updatedCards[index].flipped = !updatedCards[index].flipped;
    this.setState({
      cards: updatedCards
    });
  };
  
  // Add a card to the array, then clear input elements
  handleSubmit = e => {
    e.preventDefault();
    this.setState(state => {
      return {
        cards: [
          ...state.cards,
          { term: state.term, definition: state.definition, flipped: false }
        ],
        term: '',
        definition: ''
      };
    });
  };

  render() {
    return (
      <React.Fragment>
        <form className="card-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="term"
            onChange={this.handleChange}
            placeholder="term"
            value={this.state.term}
          />

          <input
            type="text"
            name="definition"
            onChange={this.handleChange}
            placeholder="definition"
            value={this.state.definition}
          />
          <button>Add</button>
        </form>
        <div className="card-grid">
          {this.state.cards.map((c, i) => (
            <div
              key={c.term + i}
              className="card"
              onClick={() => this.handleClick(i)}
            >
              {c.flipped ? c.definition : c.term}
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

body {
  font-family: Arial, Helvetica, sans-serif;
}

.card-grid {
  padding: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 2px solid gray;
  border-radius: 4px;
  padding: 10px;
  width: 80px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

注意:为了使示例简单，我没有包括 React Bootstrap ，但在最终项目中实现它应该不会有太多问题。