input
و textarea
، مما يجعلها مكونات متحكم فيها. ينطبق هذا على عناصر النموذج الأخرى أيضًا ، بما في ذلك عنصر form
HTML المعتاد. MyForm
form
فارغ باستخدام معالج إرسال. سيتم استدعاء معالج الإرسال عند إرسال النموذج. لقد أضفنا زرًا يرسل النموذج. يمكنك أن ترى أنه قد تم تعيين type
submit
يشير إلى أنه الزر الذي يتحكم في النموذج. إضافة عنصر input
في form
وتعيين value
وخصائص onChange()
مثل التحدي الأخير. يجب عليك ثم أكمل handleSubmit
طريقة بحيث يضع ممتلكات الدولة المكونة submit
إلى قيمة المدخلات الحالية في المحلية state
. ملاحظة: يجب عليك أيضًا استدعاء event.preventDefault()
في معالج event.preventDefault()
، لمنع سلوك إرسال النموذج الافتراضي الذي سيؤدي إلى تحديث صفحة الويب. وأخيرا، إنشاء h1
بعد علامة form
مما يجعل submit
القيمة من المكون state
. يمكنك بعد ذلك كتابة النموذج والنقر فوق الزر (أو الضغط على Enter) ، ويجب أن تشاهد الإدخال الخاص بك تم تقديمه إلى الصفحة. MyForm
should return a div
element which contains a form
and an h1
tag. The form should include an input
and a button
.");'
- text: ''
testString: 'assert(Enzyme.mount(React.createElement(MyForm)).state("input") === "" && Enzyme.mount(React.createElement(MyForm)).state("submit") === "", "The state of MyForm
should initialize with input
and submit
properties, both set to empty strings.");'
- text: ''
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", "Typing in the input
element should update the input
property of the component's state."); }; '
- text: يجب تقديم نموذج تشغيل handleSubmit
التي ينبغي أن تحدد submit
العقارات في دولة تساوي المدخلات الحالية.
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", "Submitting the form should run handleSubmit
which should set the submit
property in state equal to the current input."); };'
- text: يجب أن يعرض رأس h1
قيمة حقل " submit
من حالة المكوِّن.
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", "The h1
header should render the value of the submit
field from the component's state."); }; '
```