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

ประเภทที่ถูกต้องสำหรับเหตุการณ์ React คืออะไร เริ่มแรกฉันแค่ใช้anyเพื่อความเรียบง่าย ตอนนี้ฉันกำลังพยายามทำความสะอาดและหลีกเลี่ยงการใช้anyอย่างสมบูรณ์ ดังนั้นในรูปแบบง่ายๆดังนี้: export interface LoginProps { login: { [k: string]: string | Function uname: string passw: string logIn: Function } } @inject('login') @observer export class Login extends Component<LoginProps, {}> { update = (e: React.SyntheticEvent<EventTarget>): void => { this.props.login[e.target.name] = e.target.value } submit = (e: any): void …

131 javascript  reactjs  typescript 

ฉันยังใหม่กับ ReactJS และ React-Router ฉันมีส่วนประกอบที่ได้รับผ่านอุปกรณ์ประกอบฉากเป็น<Link/>วัตถุจากตอบสนองเราเตอร์ เมื่อใดก็ตามที่ผู้ใช้คลิกปุ่ม 'ถัดไป' ในส่วนประกอบนี้ฉันต้องการเรียกใช้<Link/>วัตถุด้วยตนเอง ตอนนี้ฉันใช้refsเพื่อเข้าถึงอินสแตนซ์สำรองและคลิกที่แท็ก 'a' ที่<Link/>สร้างขึ้นด้วยตนเอง คำถาม:มีวิธีเรียกใช้ Link (เช่นthis.props.next.go) ด้วยตนเองหรือไม่? นี่คือรหัสปัจจุบันที่ฉันมี: //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, …

131 javascript  reactjs  react-router 

เรื่องราวคือฉันควรจะใส่บ็อบแซลลี่และแจ็คลงในกล่อง ฉันยังสามารถลบออกจากกล่องได้ เมื่อถอดออกไม่เหลือช่องเสียบ people = ["Bob", "Sally", "Jack"] ตอนนี้ฉันต้องลบพูดว่า "บ๊อบ" อาร์เรย์ใหม่จะเป็น: ["Sally", "Jack"] นี่คือองค์ประกอบปฏิกิริยาของฉัน: ... getInitialState: function() { return{ people: [], } }, selectPeople(e){ this.setState({people: this.state.people.concat([e.target.value])}) }, removePeople(e){ var array = this.state.people; var index = array.indexOf(e.target.value); // Let's say it's Bob. delete array[index]; }, ... ที่นี่ฉันจะแสดงโค้ดขั้นต่ำให้คุณดูเนื่องจากมีมากกว่านั้น (onClick ฯลฯ ) ส่วนสำคัญคือการลบลบทำลาย …

131 javascript  arrays  reactjs 

ฉันกำลังทดสอบองค์ประกอบการตอบสนองด้วยการเรนเดอร์ตื้นของเอนไซม์จัสมิน ทำให้ง่ายขึ้นที่นี่เพื่อวัตถุประสงค์ของคำถามนี้ ... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponentมี 2 ​​อินสแตนซ์MyInnerComponentและฉันต้องการทดสอบอุปกรณ์ประกอบฉากในแต่ละอัน คนแรกที่ฉันรู้วิธีทดสอบ ฉันใช้findกับfirst... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); อย่างไรก็ตามฉันกำลังดิ้นรนเพื่อทดสอบตัวอย่างที่สองของMyInnerComponentไฟล์. ฉันหวังว่าสิ่งนี้จะได้ผล ... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); หรือแม้แต่สิ่งนี้ ... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); แต่แน่นอนว่าทั้งสองอย่างข้างต้นไม่ได้ผล ฉันรู้สึกว่าตัวเองหายไปอย่างชัดเจน แต่เมื่อฉันดูเอกสารฉันไม่เห็นตัวอย่างที่คล้ายคลึงกัน ใคร?

130 reactjs  jasmine  enzyme 

ฉันเป็นนักพัฒนาเชิงมุมและเพิ่งเริ่มใช้ React นี่เป็นส่วนประกอบการตอบสนองที่เรียบง่าย แต่ใช้งานไม่ได้ import react , { Component} from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( <span>hello Tech View</span> ); } } export default TechView; ข้อผิดพลาด: 'React' ต้องอยู่ในขอบเขตเมื่อใช้ JSX react / react-in-jsx-scope

129 reactjs 

ฉันมีองค์ประกอบของรูปแบบที่มีlabels และฉันต้องการมีรหัสเฉพาะเพื่อเชื่อมโยงlabels กับองค์ประกอบที่มีhtmlForแอตทริบิวต์ สิ่งนี้: React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } }); ฉันเคยสร้าง ID ตามthis._rootNodeIDแต่ใช้ไม่ได้ตั้งแต่ React 0.13 อะไรคือวิธีที่ดีที่สุดและ / หรือง่ายที่สุดในตอนนี้?

129 reactjs 

ฉันมีฟอร์มหนึ่งที่ใช้ในการสร้างอ่านอัปเดตและลบ ฉันสร้างส่วนประกอบ 3 ชิ้นในรูปแบบเดียวกัน แต่ฉันส่งอุปกรณ์ประกอบฉากต่าง ๆ ให้พวกเขา ฉันได้ CreateForm.js, ViewForm.js (อ่านอย่างเดียวพร้อมปุ่มลบ) และ UpdateForm.js ฉันเคยทำงานกับ PHP ดังนั้นฉันจึงทำสิ่งเหล่านี้ในรูปแบบเดียวเสมอ ฉันใช้ React และ Redux เพื่อจัดการร้านค้า เมื่อฉันอยู่ในองค์ประกอบ CreateForm ฉันจะส่งไปยังส่วนประกอบย่อยของฉันcreateForm={true}เพื่อประกอบฉากนี้เพื่อไม่เติมอินพุตด้วยค่าและไม่ปิดใช้งาน ในองค์ประกอบ ViewForm ของฉันฉันผ่านอุปกรณ์ประกอบฉากreadonly="readonly"นี้ และฉันมีปัญหาอีกอย่างหนึ่งกับ textarea ซึ่งเต็มไปด้วยคุณค่าและไม่สามารถอัปเดตได้ ทำปฏิกิริยา textarea ที่มีค่าเป็นแบบอ่านอย่างเดียว แต่ต้องมีการอัพเดท โครงสร้างที่ดีที่สุดในการมีองค์ประกอบเดียวเท่านั้นที่จัดการสถานะที่แตกต่างกันของแบบฟอร์มเหล่านี้คืออะไร? คุณมีคำแนะนำแบบฝึกหัดวิดีโอตัวอย่างเพื่อแบ่งปันหรือไม่?

128 javascript  reactjs  crud  redux 

ฉันได้ยินคำว่า "เมานต์" หลายครั้งเกินไปในขณะที่เรียนรู้ ReactJS และดูเหมือนจะมีวิธีการตลอดอายุการใช้งานและข้อผิดพลาดเกี่ยวกับคำนี้ React หมายถึงอะไรโดยการติดตั้ง? ตัวอย่าง: componentDidMount() and componentWillMount()

128 javascript  reactjs 

ฉันต้องการสร้างระบบแชทและเลื่อนไปที่ด้านล่างโดยอัตโนมัติเมื่อเข้าสู่หน้าต่างและเมื่อมีข้อความใหม่เข้ามาคุณจะเลื่อนไปที่ด้านล่างของคอนเทนเนอร์โดยอัตโนมัติใน React ได้อย่างไร?

128 reactjs 

เป็นไปได้ไหมที่จะฝังมาร์กอัป SVG ลงในคอมโพเนนต์ ReactJS render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } ผลลัพธ์ในข้อผิดพลาด: ไม่รองรับแอตทริบิวต์ Namespace ReactJSX ไม่ใช่ XML วิธีที่เบาที่สุดในการทำคืออะไร การใช้บางอย่างเช่นReact ARTเป็นวิธีที่มากเกินไปสำหรับสิ่งที่ฉันพยายามทำ

127 javascript  svg  reactjs 

ฉันเพิ่งพบว่าในthis.setState()ฟังก์ชันreact ในส่วนประกอบใด ๆ เป็นแบบอะซิงโครนัสหรือเรียกว่าหลังจากเสร็จสิ้นฟังก์ชันที่ถูกเรียกใช้ ตอนนี้ฉันค้นหาและพบบล็อกนี้ ( setState () State Mutation Operation อาจซิงโครนัสใน ReactJS ) ที่นี่เขาพบว่าsetStateเป็น async (เรียกว่าเมื่อ stack ว่างเปล่า) หรือ sync (เรียกทันทีที่เรียก) ขึ้นอยู่กับว่าการเปลี่ยนสถานะถูกกระตุ้นอย่างไร ตอนนี้สองสิ่งนี้ย่อยยาก ในบล็อกsetStateฟังก์ชันถูกเรียกใช้ภายในฟังก์ชันupdateStateแต่สิ่งที่เรียกใช้updateStateฟังก์ชันนั้นไม่ใช่สิ่งที่ฟังก์ชันที่เรียกว่าจะรู้ ทำไมพวกเขาถึงทำให้setStateasync เป็น JS เป็นภาษาเธรดเดียวและ setState นี้ไม่ใช่การเรียกใช้ WebAPI หรือเซิร์ฟเวอร์ดังนั้นต้องทำในเธรดของ JS เท่านั้น พวกเขาทำเช่นนี้เพื่อให้ Re-Rendering ไม่หยุดผู้ฟังเหตุการณ์และสิ่งของทั้งหมดหรือมีปัญหาด้านการออกแบบอื่น ๆ

127 javascript  multithreading  asynchronous  reactjs 

วิธีการผลักองค์ประกอบภายใน useState array React hook? นั่นเป็นวิธีการเก่าในสถานะปฏิกิริยาหรือไม่? หรือสิ่งใหม่ ๆ ? เช่นsetState push example ?

127 javascript  reactjs  react-hooks 

ฉันจะตรวจจับการกดแป้น Esc บน reactjs ได้อย่างไร สิ่งที่คล้ายกับ jquery $(document).keyup(function(e) { if (e.keyCode == 27) { // escape key maps to keycode `27` // <DO YOUR WORK HERE> } }); เมื่อตรวจพบแล้วฉันต้องการส่งต่อข้อมูลลงส่วนประกอบ ฉันมีส่วนประกอบ 3 ส่วนซึ่งส่วนประกอบที่ใช้งานสุดท้ายต้องตอบสนองต่อการกดแป้น Escape ฉันกำลังคิดถึงการลงทะเบียนประเภทหนึ่งเมื่อส่วนประกอบเริ่มทำงาน class Layout extends React.Component { onActive(escFunction){ this.escFunction = escFunction; } onEscPress(){ if(_.isFunction(this.escFunction)){ this.escFunction() } } render(){ …

126 javascript  reactjs 

ฉันยังใหม่กับ ReactJS และ UI และฉันต้องการทราบวิธีสร้างการโทร POST แบบ REST แบบง่ายๆจากโค้ด ReactJS หากมีตัวอย่างมานำเสนอคงจะเป็นประโยชน์จริงๆ

126 reactjs  reactjs-flux  reactjs-native 

ฉันกำลังพยายามใช้ event.stopPropagation () ภายในคอมโพเนนต์ ReactJS เพื่อหยุดเหตุการณ์การคลิกไม่ให้เดือดและทริกเกอร์เหตุการณ์การคลิกที่แนบมากับ JQuery ในโค้ดดั้งเดิม แต่ดูเหมือนว่า stopPropagation () ของ React จะหยุดการเผยแพร่ไปยังเหตุการณ์เท่านั้น ยังแนบอยู่ใน React และ stopPropagation () ของ JQuery ไม่หยุดการแพร่กระจายไปยังเหตุการณ์ที่แนบมากับ React มีวิธีใดบ้างที่จะทำให้ stopPropagation () ทำงานในเหตุการณ์เหล่านี้ได้ ฉันเขียนJSFiddleง่ายๆเพื่อแสดงพฤติกรรมเหล่านี้: /** @jsx React.DOM */ var Propagation = React.createClass({ alert: function(){ alert('React Alert'); }, stopPropagation: function(e){ e.stopPropagation(); }, render: function(){ return ( <div> …

126 javascript  jquery  reactjs