doc: translate forms #23
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for zh-hant-reactjs ready! Built with commit 90992ce |
92 tasks
|
Deploy preview for zh-hant-reactjs-org ready! Built with commit bc63609 |
|
@bugtender @neighborhood999 I translated |
This is now updated as 唯一真相來源 to be consistent with another PR done by @neighborhood999. |
bugtender
reviewed
Apr 1, 2019
content/docs/thinking-in-react.md
Outdated
| @@ -64,6 +64,17 @@ React 眾多的優點之ㄧ是它讓你能在寫程式的同時去思考你的 | |||
| <p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">在 <a href="http://codepen.io">CodePen</a> 中看<a href="https://codepen.io/gaearon/pen/BwWzwm">用 React 思考：第二步</a>。</p> | |||
| <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> | |||
|
|
|||
| 在你有了 component 層級後，就可以開始實作你的應用程式了。最簡單的方式是為你的應用程式建立一個接收數據模型、render UI 且沒有互動性的版本。建立一個靜態版本需要打很多字，但不需要想很多，而加上互動性則相反，需要做很多的思考，打很少的字，所以最好的方式是把這幾個過程都分開來。接下來，我們會知道為什麼要這樣做。 | |||
There was a problem hiding this comment.
Here is some duplicate translation in thinking in react part.
There was a problem hiding this comment.
Yes! Thanks for catching the errors.
content/docs/forms.md
Outdated
|
|
||
| When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`. | ||
| 當你需要處理多個 controlled `input` element，你可以在每個 element 中加入一個 `name` attribute，並讓 handler function 選擇基於 `event.target.name` 的值該怎麼做： | ||
|
|
||
| For example: |
| @@ -9,7 +9,7 @@ redirect_from: | |||
| - "docs/forms-zh-CN.html" | |||
| --- | |||
|
|
|||
| HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: | |||
| HTML 表格的 element 和 React 中其他的 DOM element 不太一樣，因為表格的 element 很自然地有一些內部的 state。例如，下面的這個表格在純粹的 HTML 中接收單一的名稱： | |||
There was a problem hiding this comment.
I think 簡單 more intuitive.
Suggested change
| HTML 表格的 element 和 React 中其他的 DOM element 不太一樣，因為表格的 element 很自然地有一些內部的 state。例如，下面的這個表格在純粹的 HTML 中接收單一的名稱： | |
| HTML 表格的 element 和 React 中其他的 DOM element 不太一樣，因為表格的 element 很自然地有一些內部的 state。例如，下面的這個表格在簡單的 HTML 中接收單一的名稱： |
| @@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac | |||
| </form> | |||
| ``` | |||
|
|
|||
| This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components". | |||
| 這個表格有 HTML 表格的預設行為，也就是在使用者遞交一個表格的時候去瀏覽一個新頁面。如果你想要在 React 中也有這樣的行為的話，直接用 HTML 是可行的。但是在大多數的情況中，有一個 JavaScript function 來處理遞交表格的功能並讀取使用者在表格中填入的資料是很方便的。要做到這樣，標準的方法是使用「controlled component」： | |||
There was a problem hiding this comment.
The term controlled in others reviewing, I suggest it can be translated to 被控制的, or maybe we may keep original term?
Suggested change
| 這個表格有 HTML 表格的預設行為，也就是在使用者遞交一個表格的時候去瀏覽一個新頁面。如果你想要在 React 中也有這樣的行為的話，直接用 HTML 是可行的。但是在大多數的情況中，有一個 JavaScript function 來處理遞交表格的功能並讀取使用者在表格中填入的資料是很方便的。要做到這樣，標準的方法是使用「controlled component」： | |
| 這個表格有 HTML 表格的預設行為，也就是在使用者提交一個表格的時候去瀏覽一個新頁面。如果你想要在 React 中也有這樣的行為的話，直接用 HTML 是可行的。但是在大多數的情況中，有一個 JavaScript function 來處理提交表格的功能並讀取使用者在表格中填入的資料是很方便的。要做到這樣，標準的方法是使用「controlled component」： |
|
|
||
| If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them. | ||
| 如果你想找出一個完整的、包含驗證、可追蹤 visited field 並能處理遞交表格等功能的解決方案，[Formik](https://jaredpalmer.com/formik) 是一個很熱門的選擇。然而，它是在與 controlled component 和維持 state 相同的原則上所建立的，所以別忘了學習它。 |
There was a problem hiding this comment.
Suggested change
| 如果你想找出一個完整的、包含驗證、可追蹤 visited field 並能處理遞交表格等功能的解決方案，[Formik](https://jaredpalmer.com/formik) 是一個很熱門的選擇。然而，它是在與 controlled component 和維持 state 相同的原則上所建立的，所以別忘了學習它。 | |
| 如果你想找出一個完整的、包含驗證、可追蹤 visited field 並能處理提交表格等功能的解決方案，[Formik](https://jaredpalmer.com/formik) 是一個很熱門的選擇。然而，它是在與 controlled component 和維持 state 相同的原則上所建立的，所以別忘了學習它。 |
Merged
|
Hi @chloewlin I close this PR because you have already opened new PR for translating forms.😄 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is just a PR to let you know that I am working on forms.