freeCodeCamp/create-a-controlled-form.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

6.6 KiB

Raw Blame History

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
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 键），你的输入会渲染到页面上。

Tests

tests:
  - text: <code>MyForm</code>应该返回一个包含<code>form</code>和<code>h1</code>标签的<code>div</code>元素，其中，表单中应该包括一个<code>input</code>和一个<code>button</code>。
    testString: 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) })());
  - text: <code>MyForm</code>的 state 应该用<code>input</code>和<code>submit</code>属性初始化，且两者都为空字符串。
    testString: assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '');
  - text: <code>input</code>元素中的输入应该会更新组件中 state 的<code>input</code>属性。
    testString: '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''); }; '
  - text: 提交表单应该运行<code>handleSubmit</code>，它应该将 state 中的<code>submit</code>属性设置为当前输入。
    testString: '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''); };'
  - text: <code>h1</code>标题应该从组件的 state 渲染<code>submit</code>字段的值。
    testString: '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''); }; '

Challenge Seed

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // change code below this line

    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }

          { /* change code above this line */ }
          <button type='submit'>Submit!</button>
        </form>
        { /* change code below this line */ }

        { /* change code above this line */ }
      </div>
    );
  }
};

After Test

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

Solution

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.input}
            onChange={this.handleChange} />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};

6.6 KiB Raw Blame History Unescape Escape