freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/react/create-a-controlled-form.md

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
5a24c314108439a4d4036179	创建一个可以控制的表单	6	301384

--description--

上一个挑战展示了 React 能控制某些元素的内部 state，比如input和textarea，这使得这些元素成为受控组件。这也适用于其他表单元素，包括常规的 HTML 表单form元素。

--instructions--

MyForm组件中是一个带有提交处理程序的空form元素，提交处理程序将在提交表单时被调用。

我们增加了一个提交表单的按钮。你可以看到它的type被设置为submit，表明它是控制表单的按钮。在表单中添加input元素，并像上次挑战一样设置其value和onChange()属性。然后，你应该完成handleSubmit方法，以便将组件 state 属性submit设置为本地state下的当前输入值。

注意： 你还必须在提交处理程序中调用event.preventDefault()，以防止默认的表单提交行为刷新网页。

最后，在form元素之后创建一个h1标签，该标签从组件的state渲染submit的值。然后，你可以在表单中键入任何内容，然后单击按钮（或按 enter 键），你的输入会渲染到页面上。

--hints--

MyForm应该返回一个包含form和h1标签的div元素，其中，表单中应该包括一个input和一个button。

assert(
  (() => {
    const mockedComponent = Enzyme.mount(React.createElement(MyForm));
    return (
      mockedComponent.find('div').children().find('form').length === 1 &&
      mockedComponent.find('div').children().find('h1').length === 1 &&
      mockedComponent.find('form').children().find('input').length === 1 &&
      mockedComponent.find('form').children().find('button').length === 1
    );
  })()
);

MyForm的 state 应该用input和submit属性初始化，且两者都为空字符串。

assert(
  Enzyme.mount(React.createElement(MyForm)).state('input') === '' &&
    Enzyme.mount(React.createElement(MyForm)).state('submit') === ''
);

input元素中的输入应该会更新组件中 state 的input属性。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
  const _1 = () => {
    mockedComponent.setState({ input: '' });
    return waitForIt(() => mockedComponent.state('input'));
  };
  const _2 = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: 'TestInput' } });
    return waitForIt(() => ({
      state: mockedComponent.state('input'),
      inputVal: mockedComponent.find('input').props().value
    }));
  };
  const before = await _1();
  const after = await _2();
  assert(
    before === '' &&
      after.state === 'TestInput' &&
      after.inputVal === 'TestInput'
  );
};

提交表单应该运行handleSubmit，它应该将 state 中的submit属性设置为当前输入。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
  const _1 = () => {
    mockedComponent.setState({ input: '' });
    mockedComponent.setState({ submit: '' });
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: 'SubmitInput' } });
    return waitForIt(() => mockedComponent.state('submit'));
  };
  const _2 = () => {
    mockedComponent.find('form').simulate('submit');
    return waitForIt(() => mockedComponent.state('submit'));
  };
  const before = await _1();
  const after = await _2();
  assert(before === '' && after === 'SubmitInput');
};

h1标题应该从组件的 state 渲染submit字段的值。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
  const _1 = () => {
    mockedComponent.setState({ input: '' });
    mockedComponent.setState({ submit: '' });
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: 'TestInput' } });
    return waitForIt(() => mockedComponent.find('h1').text());
  };
  const _2 = () => {
    mockedComponent.find('form').simulate('submit');
    return waitForIt(() => mockedComponent.find('h1').text());
  };
  const before = await _1();
  const after = await _2();
  assert(before === '' && after === 'TestInput');
};

--solutions--