Question

我有两个组件：InputValues和AddProject。我在AddProject中使用了表单标记，并在InputValues内使用了AddProject组件。点击提交按钮，我想获得handleSubmit()功能中的文本框值。我怎么能这样做？

export class InputValues extends Component {
  updateText() {
    this.setState(
      {
        title: this.refs.title.value
      },
      function() {
        console.log(this.state);
      }
    );
  }
  render() {
    return (
      <div>
        <input type="text" ref="title" onChange={this.updateText.bind(this)} />
      </div>
    );
  }
}

class AddProject extends Component {
  constructor() {
    super();
    this.state = { title: '' };
  }

  handleSubmit(e) {
    this.setState(
      {
        title: this.refs.title.value
      },
      function() {
        console.log(this.state);
      }
    );
    e.preventDefault();
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <InputValues />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

Answer 1

我要做的第一件事就是将你的InputValues改为“纯功能组件”。由于您已经在父组件中管理状态（标题），因此这有点清晰。我们将在其中放置一个占位符，以允许父级处理更改。请注意，该值也是从props设置的，这意味着父控件现在控制输入的每个方面：它实际上只是一个“哑”的UI元素。

function InputValues(props) {
  return (
    <div>
      <input type="text" value={props.value} onChange={props.onInputChange} />
    </div>
  );
}

然后在父组件上创建处理程序并访问onsubmit中的状态。需要注意以下几点：我们在构造函数中绑定this handleInputChange，以便我们可以访问this.setState。我们可以通过e.target.value获取新值。这与docs完全相同。您可以在提交处理程序中访问this.state.title以检查您要检查的内容。

class AddProject extends Component {
  constructor() {
    super();
    this.state = { title: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(e) {
    this.setState(
      {
        title: e.target.value
      },
      function() {
        console.log(this.state);
      }
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    // validate and do whatever is appropriate here
    if (this.state.title === "Expected Title") {
      return true;
    }

    return false;
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <InputValues value={this.state.title} onInputChange={this.handleInputChange}/>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

如何获取组件的输入值并将其呈现在另一个组件中并传回

1 个答案: