Question

我是reactjs的新手。我有点困惑，我想在第一个输入字段中写一些东西，同时它应该反映在第二个输入字段中。如果我删除第一个输入字段中的值，那么它也应该删除第二个输入字段。有人可以帮我吗？

以下是代码：

import React, { Component } from "react";
import "./styles.css";
import { Form, Input, Button } from "semantic-ui-react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: ""
    };
  }

  handleName = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <div className="App">
        <Form>
          <Input
            placeholder="Name"
            onChange={this.handleName}
            name="name"
            value={this.state.name}
          />
          <Input
            placeholder="Email"
            onChange={this.handleName}
            name="email"
            value="@yahoo.com"
          />
        </Form>
        <Button>Submit</Button>
      </div>
    );
  }
}
export default App;

代码：“ https://codesandbox.io/s/reverent-fast-3w8sz”

Answer 1

您需要为两个字段使用相同的{this.state.name}作为值。例如：

<Input
            placeholder="Name"
            onChange={this.handleName}
            name="name"
            value={this.state.name}
          />
          <Input
            placeholder="Email"
            onChange={this.handleName}
            name="email"
            value={this.state.name}
          />

Answer 2

如果要在第二个输入中保留yahoo.com作为后缀，请用value代替输入字段的value={`${this.state.name}yahoo.com`}道具。希望这就是您要寻找的

如何使用reactjs在另一个输入字段中显示输入字段值？

2 个答案: