คำถามติดแท็ก reactjs

ฉันมีองค์ประกอบการตอบสนองต่อไปนี้: export default class MyComponent extends React.Component { onSubmit(e) { e.preventDefault(); var title = this.title; console.log(title); } render(){ return ( ... <form className="form-horizontal"> ... <input type="text" className="form-control" ref={(c) => this.title = c} name="title" /> ... </form> ... <button type="button" onClick={this.onSubmit} className="btn">Save</button> ... ); } }; คอนโซลกำลังให้ฉันundefined- ความคิดใด ๆ ที่เกิดขึ้นกับรหัสนี้

188 javascript  reactjs 

ภาษาเทมเพลตจำนวนมากมีคำสั่ง "slot" หรือ "yield" ที่อนุญาตให้ทำการเรียงกลับกันบางส่วนของการควบคุมเพื่อห่อเทมเพลตหนึ่งไว้ในอีกอันหนึ่ง เชิงมุมมี"transclude ตัวเลือก" ทางรถไฟมีคำสั่งให้ผลผลิต หาก React.js มีข้อความให้ผลก็จะมีลักษณะเช่นนี้: var Wrapper = React.createClass({ render: function() { return ( <div className="wrapper"> before <yield/> after </div> ); } }); var Main = React.createClass({ render: function() { return ( <Wrapper><h1>content</h1></Wrapper> ); } }); ผลลัพธ์ที่ต้องการ: <div class="wrapper"> before <h1>content</h1> after </div> อนิจจา …

187 javascript  template-engine  composition  reactjs  transclusion 

สมมติว่าฉันมีคลาส React P ซึ่งแสดงคลาสลูกสองคลาสคือ C1 และ C2 C1 มีฟิลด์อินพุต ฉันจะอ้างถึงฟิลด์อินพุตนี้เป็น Foo เป้าหมายของฉันคือให้ C2 ตอบสนองต่อการเปลี่ยนแปลงใน Foo ฉันคิดวิธีแก้ปัญหาสองข้อ แต่ก็ไม่ได้รู้สึกถูก วิธีแก้ปัญหาแรก: กำหนด P state.inputรัฐ สร้างonChangeฟังก์ชั่นในโหมด P state.inputซึ่งใช้เวลาในเหตุการณ์และชุด ส่งสิ่งนี้onChangeไปที่ C1 เป็น a propsและให้ C1 ผูกthis.props.onChangeกับonChangeFoo วิธีนี้ใช้ได้ผล เมื่อใดก็ตามที่ค่าของ Foo เปลี่ยนแปลงจะมีการเรียก a setStateใน P ดังนั้น P จะมีอินพุตที่จะผ่านไปยัง C2 แต่รู้สึกไม่ถูกต้องด้วยเหตุผลเดียวกัน: ฉันกำลังตั้งค่าสถานะขององค์ประกอบหลักจากองค์ประกอบย่อย สิ่งนี้ดูเหมือนจะหักหลังหลักการออกแบบของ React: การไหลของข้อมูลทิศทางเดียว นี่เป็นวิธีที่ฉันควรจะทำหรือมีวิธีแก้ปัญหาที่เป็นธรรมชาติมากกว่านี้หรือไม่? ทางออกที่สอง: เพียงแค่ใส่ …

186 reactjs 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน2 ปีที่ผ่านมา ปรับปรุงคำถามนี้ React 16.3.0 ได้รับการเผยแพร่และAPI บริบทไม่ได้เป็นคุณลักษณะทดลองอีกต่อไป แดน Abramov (ผู้สร้างของ Redux) การแสดงความคิดเห็นที่ดีเขียนที่นี่เกี่ยวกับเรื่องนี้ แต่มันก็ 2 ปีเมื่อบริบทก็ยังคงคุณลักษณะทดลอง คำถามของฉันคือในความเห็น / ประสบการณ์ของคุณเมื่อใดที่ฉันควรใช้React Contextผ่านReact Reduxและในทางกลับกัน

186 javascript  reactjs  redux  react-redux  react-context 

ฉันมีปัญหากับแบบฟอร์มการตอบโต้และการจัดการสถานะอย่างถูกต้อง ฉันมีช่องป้อนเวลาในรูปแบบ (ในคำกริยา) ค่าเริ่มต้นถูกตั้งค่าเป็นตัวแปรสถานะในgetInitialStateและถูกส่งผ่านมาจากองค์ประกอบหลัก ในตัวมันเองทำงานได้ดี ปัญหาเกิดขึ้นเมื่อฉันต้องการอัปเดตค่าเริ่มต้น start_time ผ่านองค์ประกอบหลัก setState start_time: new_timeการปรับปรุงตัวเองที่เกิดขึ้นในองค์ประกอบแม่ผ่าน อย่างไรก็ตามในรูปแบบของฉันค่าเริ่มต้น start_time จะไม่มีการเปลี่ยนแปลงเนื่องจากมีการกำหนดเพียงครั้งเดียวgetInitialStateเท่านั้น ฉันพยายามใช้componentWillUpdateเพื่อบังคับให้เกิดการเปลี่ยนแปลงผ่านทางรัฐsetState start_time: next_props.start_timeซึ่งใช้งานได้จริง แต่ให้Uncaught RangeError: Maximum call stack size exceededข้อผิดพลาดแก่ฉัน ดังนั้นคำถามของฉันคืออะไรวิธีที่ถูกต้องในการปรับปรุงสถานะในกรณีนี้คืออะไร? ฉันกำลังคิดผิดเกี่ยวกับเรื่องนี้หรือไม่? รหัสปัจจุบัน: @ModalBody = React.createClass getInitialState: -> start_time: @props.start_time.format("HH:mm") #works but takes long and causes: #"Uncaught RangeError: Maximum call stack size exceeded" componentWillUpdate: (next_props, next_state) …

184 reactjs 

เหตุใดฉันจึงไม่สามารถเข้าถึงวิธีส่วนประกอบจาก“ ภายนอก” ใน ReactJS ได้ ทำไมมันเป็นไปไม่ได้และมีวิธีใดที่จะแก้ปัญหาได้? พิจารณารหัส: var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: function() { return ( <div> foo </div> ); }, …

183 javascript  reactjs  dom 

ฉันต้องการที่จะแสดงtitleใน<AppBar />ที่อย่างใดผ่านมาจากเส้นทางปัจจุบัน ใน React Router v4 จะ<AppBar />สามารถรับเส้นทางปัจจุบันที่ส่งเข้าสู่titleเสาได้อย่างไร <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> มีวิธีที่จะผ่านชื่อที่กำหนดเองจากที่กำหนดเองpropบน<Route />?

183 reactjs  react-router  react-router-v4 

ฉันกำลังเรียกใช้บริการเว็บโดยใช้การดึงข้อมูล แต่ฉันสามารถทำได้ด้วยความช่วยเหลือของ axios ดังนั้นตอนนี้ฉันสับสน ฉันควรจะไปหา axios หรือ fetch ไหม?

182 ajax  reactjs  xmlhttprequest  es6-promise  es6-modules 

ฉันยังใหม่กับการใช้คลาส ES6 กับ React ก่อนหน้านี้ฉันผูกเมธอดของฉันกับวัตถุปัจจุบัน (แสดงในตัวอย่างแรก) แต่ ES6 อนุญาตให้ฉันผูกฟังก์ชันคลาสกับอินสแตนซ์ของคลาสด้วยลูกศรอย่างถาวรหรือไม่ (มีประโยชน์เมื่อผ่านเป็นฟังก์ชั่นการโทรกลับ) ฉันได้รับข้อผิดพลาดเมื่อฉันพยายามใช้พวกเขาเท่าที่คุณสามารถทำได้ด้วย CoffeeScript: class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } ดังนั้นถ้าฉันจะส่งผ่านSomeClass.handleInputChangeไปเช่นsetTimeoutมันจะถูกกำหนดขอบเขตให้กับอินสแตนซ์ของชั้นเรียนไม่ใช่windowวัตถุ

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

ฉันมีวิดเจ็ตการแชทที่ดึงลำดับของข้อความทุกครั้งที่เลื่อนขึ้น ปัญหาที่ฉันกำลังเผชิญอยู่ในขณะนี้คือตัวเลื่อนยังคงอยู่ที่ด้านบนเมื่อโหลดข้อความ ฉันต้องการให้มันมุ่งเน้นไปที่องค์ประกอบดัชนีสุดท้ายจากอาร์เรย์ก่อนหน้า ฉันคิดว่าฉันสามารถสร้างการอ้างอิงแบบไดนามิกโดยผ่านดัชนี แต่ฉันก็ต้องรู้ว่าฟังก์ชั่นการเลื่อนแบบใดที่จะใช้เพื่อให้บรรลุ handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( <div> <div ref="test"></div> </div>) }

181 javascript  reactjs  ecmascript-6 

ฉันยังใหม่กับโลกทั้งnodejs / reactjsดังนั้นขอโทษถ้าคำถามของฉันดูเหมือนโง่ ดังนั้นฉันเล่นรอบกับreactabular.js เมื่อใดก็ตามที่ฉันทำnpm startมันจะทำงานต่อlocalhost:8080ไป ฉันจะเปลี่ยนให้ทำงาน0.0.0.0:8080เพื่อให้เข้าถึงได้แบบสาธารณะได้อย่างไร ฉันพยายามอ่านซอร์สโค้ดใน repo ด้านบน แต่ไม่พบไฟล์ที่ใช้การตั้งค่านี้ นอกจากนี้ในการเพิ่มไปยัง - ฉันจะทำให้มันทำงานบนพอร์ตได้80อย่างไรถ้าเป็นไปได้?

180 node.js  reactjs  npm  webpack  webpack-dev-server 

ด้วย React 16.8.6 (ดีในเวอร์ชันก่อนหน้า 16.8.3) ฉันได้รับข้อผิดพลาดนี้เมื่อฉันพยายามป้องกันลูปไม่สิ้นสุดในคำขอดึงข้อมูล ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps ฉันไม่พบวิธีแก้ปัญหาที่หยุดลูปไม่สิ้นสุด useReducer()ผมต้องการที่จะอยู่ห่างจากการใช้ ฉันพบการสนทนานี้https://github.com/facebook/react/issues/14920ซึ่งการแก้ปัญหาที่เป็นไปได้คือYou can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.ฉันไม่มั่นใจในสิ่งที่ฉันทำดังนั้นฉันยังไม่ได้ลองใช้งานเลย ฉันมีการตั้งค่าปัจจุบันนี้React hook useEffect จะทำงานอย่างต่อเนื่องตลอดไป / วนซ้ำไม่สิ้นสุดและความคิดเห็นเพียงอย่างเดียวคือuseCallback()สิ่งที่ฉันไม่คุ้นเคย วิธีที่ฉันใช้อยู่ในปัจจุบันuseEffect()(ซึ่งฉันต้องการเรียกใช้ครั้งเดียวในจุดเริ่มต้นที่คล้ายกับcomponentDidMount()) useEffect(() …

180 reactjs  eslint  create-react-app  react-hooks 

ฉันชอบรูปแบบ CSS แบบอินไลน์ใน Reactและตัดสินใจที่จะใช้ อย่างไรก็ตามคุณไม่สามารถใช้:hoverและ selector ที่คล้ายกันได้ ดังนั้นวิธีที่ดีที่สุดในการใช้ไฮไลต์บนโฮเวอร์ขณะใช้สไตล์ CSS แบบอินไลน์คืออะไร หนึ่งข้อเสนอแนะจาก #reactjs คือการมีClickableส่วนประกอบและใช้งานดังนี้: <Clickable> <Link /> </Clickable> Clickableมีhoveredรัฐและผ่านมันเป็นอุปกรณ์ประกอบฉากที่จะเชื่อมโยง อย่างไรก็ตาม, Clickable(วิธีที่ฉันใช้มัน) ล้อมรอบLinkในdivเพื่อที่จะสามารถตั้งค่าonMouseEnterและonMouseLeaveมัน สิ่งนี้ทำให้สิ่งที่ซับซ้อนเล็กน้อย (เช่นspanห่อในdivพฤติกรรมที่แตกต่างกว่าspan) มีวิธีที่ง่ายกว่านี้ไหม?

178 reactjs 

ฉันพยายามสลับสถานะขององค์ประกอบใน ReactJS แต่ฉันพบข้อผิดพลาด: เกินความลึกการอัปเดตสูงสุด สิ่งนี้สามารถเกิดขึ้นได้เมื่อคอมโพเนนต์เรียก setState ภายใน componentWillUpdate หรือ componentDidUpdate ซ้ำ ๆ React จำกัด จำนวนการอัพเดตที่ซ้อนเพื่อป้องกันการวนซ้ำไม่สิ้นสุด ฉันไม่เห็นลูปไม่สิ้นสุดในรหัสของฉันใครสามารถช่วยได้บ้าง ReactJS รหัสองค์ประกอบ: import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = …

178 javascript  reactjs  react-native 

สมมติว่าฉันมี 3 อินพุต: rate, sendAmount และ earnAmount ฉันใส่ 3 อินพุตนั้นไว้ใช้ กฎคือ: ถ้า sendAmount เปลี่ยนแปลงฉันจะคำนวณ receiveAmount = sendAmount * rate หากได้รับการเปลี่ยนแปลงฉันคำนวณ sendAmount = receiveAmount / rate หากอัตราเปลี่ยนแปลงฉันคำนวณว่าreceiveAmount = sendAmount * rateเมื่อใดsendAmount > 0หรือคำนวณsendAmount = receiveAmount / rateเมื่อใดreceiveAmount > 0 นี่คือรหัสแซนด์บ็อกซ์https://codesandbox.io/s/pkl6vn7x6jเพื่อสาธิตปัญหา มีวิธีที่จะเปรียบเทียบได้oldValuesและnewValuesต้องการบนcomponentDidUpdateแทนการขนย้ายวัสดุ 3 สำหรับกรณีนี้หรือไม่? ขอบคุณ นี่คือทางออกสุดท้ายของฉันกับusePrevious https://codesandbox.io/s/30n01w2r06 ในกรณีนี้ฉันไม่สามารถใช้หลายรายการได้useEffectเนื่องจากการเปลี่ยนแปลงแต่ละครั้งนำไปสู่การโทรในเครือข่ายเดียวกัน นั่นเป็นเหตุผลที่ฉันใช้changeCountเพื่อติดตามการเปลี่ยนแปลงด้วย changeCountนอกจากนี้ยังมีประโยชน์ในการติดตามการเปลี่ยนแปลงจากภายในเครื่องเท่านั้นดังนั้นฉันจึงสามารถป้องกันการโทรเครือข่ายที่ไม่จำเป็นเนื่องจากการเปลี่ยนแปลงจากเซิร์ฟเวอร์

178 reactjs  react-hooks