จะรับค่าของฟิลด์อินพุตโดยใช้ 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- ความคิดใด ๆ ที่เกิดขึ้นกับรหัสนี้

คุณควรใช้ Constructor ภายใต้คลาส MyComponent Extends React.Component

constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

จากนั้นคุณจะได้รับผลลัพธ์ของชื่อ

มีสามคำตอบที่นี่ขึ้นอยู่กับเวอร์ชันของ React ที่คุณ (บังคับให้) ทำงาน (ไอเอ็นจี) ด้วยและไม่ว่าคุณต้องการใช้ hooks หรือไม่

สิ่งแรกก่อน:

สิ่งสำคัญคือต้องเข้าใจวิธีการทำงานของ React เพื่อให้คุณสามารถทำสิ่งต่าง ๆ ได้อย่างถูกต้อง (protip: มันยอดเยี่ยมมากที่จะทำแบบฝึกหัดการสอน React บนเว็บไซต์ React มันเขียนได้ดีและครอบคลุมพื้นฐานทั้งหมดในแบบที่อธิบายวิธีการทำจริง สิ่ง) "ถูกต้อง" ที่นี่หมายความว่าคุณกำลังเขียนส่วนต่อประสานแอปพลิเคชันที่จะแสดงผลในเบราว์เซอร์ อินเทอร์เฟซทั้งหมดเกิดขึ้นใน React ไม่ใช่ใน "สิ่งที่คุณคุ้นเคยหากคุณกำลังเขียนเว็บเพจ" (นี่คือสาเหตุที่แอป React เป็น "แอพ" ไม่ใช่ "หน้าเว็บ")

แอปพลิเคชันที่ทำปฏิกิริยาถูกเรนเดอร์จากสองสิ่ง:

1. คุณสมบัติของส่วนประกอบตามที่ประกาศโดยผู้ปกครองใดก็ตามที่สร้างอินสแตนซ์ขององค์ประกอบนั้นซึ่งผู้ปกครองสามารถปรับเปลี่ยนตลอดวงจรชีวิตของมันและ
2. สถานะภายในของส่วนประกอบซึ่งสามารถแก้ไขได้ตลอดวงจรชีวิตของมันเอง

สิ่งที่คุณไม่ได้ทำอย่างชัดเจนเมื่อคุณใช้ React คือการสร้างองค์ประกอบ HTML แล้วใช้สิ่งนั้นเมื่อคุณบอก React ให้ใช้<input>ตัวอย่างเช่นคุณไม่ได้สร้างองค์ประกอบอินพุต HTML คุณจะบอก React เพื่อสร้างวัตถุอินพุต React ที่เกิดขึ้นกับการแสดงผลเป็นองค์ประกอบเข้า HTML และมีการจัดการรูปลักษณ์ที่เหตุการณ์แต่ไม่ได้ถูกควบคุมโดยเหตุการณ์การป้อนข้อมูลองค์ประกอบ HTML ของ

เมื่อใช้ React สิ่งที่คุณกำลังทำคือการสร้างองค์ประกอบ UI ของแอปพลิเคชันที่นำเสนอผู้ใช้ด้วยข้อมูล (มักแก้ไขได้) ด้วยการโต้ตอบกับผู้ใช้ที่เปลี่ยนสถานะของคอมโพเนนต์ซึ่งอาจทำให้ส่วนของอินเทอร์เฟซแอพพลิเคชันของคุณแสดงสถานะใหม่ ในโมเดลนี้สถานะจะเป็นสิทธิ์ขั้นสุดท้ายเสมอไม่ใช่ "ไลบรารี UI ใด ๆ ก็ตามที่ใช้แสดงผล" ซึ่งบนเว็บคือ DOM ของเบราว์เซอร์ DOM เป็นสิ่งที่เกือบจะเกิดขึ้นภายหลังในรูปแบบการเขียนโปรแกรมนี้: มันเป็นเพียงเฟรมเวิร์ก UI เฉพาะที่ React เกิดขึ้นที่จะใช้

ดังนั้นในกรณีขององค์ประกอบอินพุตตรรกะคือ:

1. คุณพิมพ์ในองค์ประกอบอินพุต
2. ไม่มีอะไรเกิดขึ้นกับองค์ประกอบการป้อนข้อมูลของคุณ แต่เหตุการณ์ได้ขัดขวางโดยตอบสนองและฆ่าทิ้งทันที ,
3. ตอบกลับเหตุการณ์ต่อไปยังฟังก์ชันที่คุณตั้งค่าไว้สำหรับการจัดการเหตุการณ์
4. ฟังก์ชั่นนั้นอาจกำหนดการอัพเดทสถานะ
5. ถ้าเป็นเช่นนั้น React จะรันการอัพเดทสถานะนั้น (แบบอะซิงโครนัส!) และจะทริกเกอร์การrenderโทรหลังจากการอัพเดท แต่เฉพาะในกรณีที่การอัพเดทสถานะเปลี่ยนสถานะ
6. เพียง แต่หลังจากนี้จะแสดงผลได้ที่สถานที่จะแสดง UI ที่คุณ "พิมพ์ตัวอักษร"

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

ดังนั้นด้วยวิธีที่กล่าวถึงวิธีรับค่าจากองค์ประกอบใน React:

ทำปฏิกิริยา 15 และต่ำกว่าด้วย ES5

ในการทำสิ่งต่าง ๆ อย่างถูกต้องส่วนประกอบของคุณมีค่าสถานะซึ่งจะแสดงผ่านฟิลด์อินพุตและเราสามารถอัปเดตได้โดยทำให้องค์ประกอบ UI นั้นส่งกิจกรรมการเปลี่ยนแปลงกลับไปที่องค์ประกอบ:

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },

  updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

ดังนั้นเราจึงบอก React ให้ใช้updateInputValueฟังก์ชั่นเพื่อจัดการกับการโต้ตอบของผู้ใช้ใช้setStateในการกำหนดตารางการอัพเดทสถานะและข้อเท็จจริงที่ว่าการrenderแตะลงthis.state.inputValueนั้นหมายความว่าเมื่อมันแสดงผลหลังจากอัพเดทสถานะผู้ใช้จะเห็นข้อความอัปเดตตามสิ่งที่พิมพ์

ภาคผนวกตามความคิดเห็น

ระบุว่าอินพุท UI แสดงค่าสถานะ (พิจารณาว่าจะเกิดอะไรขึ้นหากผู้ใช้ปิดแท็บกึ่งกลางและแท็บจะได้รับการคืนค่าทั้งหมดที่พวกเขากรอกจะถูกกู้คืนหรือไม่ถ้าใช่นั่นคือสถานะ) นั่นอาจทำให้คุณรู้สึกว่ารูปแบบขนาดใหญ่ต้องการแบบฟอร์มป้อนข้อมูลหลายสิบหรือหลายร้อยแบบ แต่การตอบสนองนั้นเกี่ยวกับการสร้างแบบจำลอง UI ของคุณในแบบที่รักษาได้: คุณไม่มีช่องป้อนข้อมูลอิสระ 100 ช่องคุณมีกลุ่มของอินพุตที่เกี่ยวข้อง กลุ่มในองค์ประกอบและสร้างฟอร์ม "ต้นแบบ" ของคุณเป็นกลุ่มของกลุ่ม

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

นอกจากนี้ยังง่ายต่อการบำรุงรักษามากกว่าองค์ประกอบแบบฟอร์มเดี่ยวขนาดยักษ์ แบ่งกลุ่มออกเป็นส่วนประกอบด้วยการบำรุงรักษาสถานะโดยที่แต่ละส่วนประกอบมีหน้าที่รับผิดชอบในการติดตามฟิลด์อินพุตสองสามครั้ง

คุณอาจรู้สึกว่าเป็น "ความยุ่งยาก" ในการเขียนรหัสทั้งหมด แต่นั่นเป็นการประหยัดที่ผิดพลาด: นักพัฒนาซอฟต์แวร์ที่ไม่ได้เป็นคุณรวมถึงอนาคตที่คุณจะได้รับประโยชน์อย่างมากจากการเห็นอินพุตทั้งหมดติดอยู่อย่างชัดเจนเพราะ ทำให้เส้นทางรหัสง่ายต่อการติดตาม อย่างไรก็ตามคุณสามารถเพิ่มประสิทธิภาพได้ตลอดเวลา ตัวอย่างเช่นคุณสามารถเขียนตัวเชื่อมโยงสถานะ

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",
      lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },
  componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },
  render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});

แน่นอนว่ามีรุ่นที่ได้รับการปรับปรุงให้ดีขึ้นดังนั้นให้https://npmjs.comและค้นหาโซลูชันการเชื่อมโยงสถานะ React ที่คุณชอบมากที่สุด โอเพ่นซอร์สส่วนใหญ่เกี่ยวกับการค้นหาสิ่งที่คนอื่นทำไปแล้วและการใช้สิ่งนั้นแทนที่จะเขียนทุกอย่างด้วยตัวเอง

ทำปฏิกิริยา 16 (และการเปลี่ยนผ่าน 15.5) และ JS 'ทันสมัย'

ตั้งแต่ React 16 (และเริ่มด้วย soft 15.5) การcreateClassโทรไม่ได้รับการสนับสนุนอีกต่อไปและจำเป็นต้องใช้ไวยากรณ์คลาส นี้จะเปลี่ยนสิ่งที่สอง: ไวยากรณ์ระดับที่เห็นได้ชัด แต่ยังthisบริบทผูกพันที่createClassจะทำ "ฟรี" เพื่อที่จะให้แน่ใจว่าสิ่งที่ยังคงทำงานให้แน่ใจว่าคุณกำลังใช้ "ลูกศรไขมัน" สัญกรณ์สำหรับthisบริบทการรักษาฟังก์ชั่นที่ไม่ระบุชื่อในการonWhateverขนย้ายวัสดุเช่นonChangeใช้เราในรหัสที่นี่:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      //...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

คุณอาจเคยเห็นคนใช้ตัวbindสร้างของพวกเขาสำหรับฟังก์ชั่นจัดการเหตุการณ์ทั้งหมดเช่นนี้

constructor(props) {
  super(props);
  this.handler = this.handler.bind(this);
  ...
}

render() {
  return (
    ...
    <element onclick={this.handler}/>
    ...
  );
}

อย่าทำอย่างนั้น

เกือบทุกครั้งที่คุณใช้bindสุภาษิต "คุณทำผิด" ใช้ คลาสของคุณได้กำหนดต้นแบบของวัตถุแล้วและได้กำหนดบริบทของอินสแตนซ์แล้ว อย่าเอาbindสิ่งที่ดีไปกว่านั้น ใช้การส่งต่อเหตุการณ์ปกติแทนการทำซ้ำการเรียกใช้ฟังก์ชันทั้งหมดของคุณในตัวสร้างเนื่องจากการทำซ้ำนั้นจะเพิ่มพื้นผิวบั๊กของคุณและทำให้การติดตามข้อผิดพลาดนั้นยากขึ้นเพราะปัญหาอาจอยู่ในตัวสร้างของคุณแทนที่จะเป็นที่ที่คุณเรียกรหัสของคุณ รวมถึงการวางภาระการบำรุงรักษาให้กับผู้อื่นที่คุณ (มีหรือเลือก) เพื่อทำงานกับ

ใช่ฉันรู้ว่าเอกสารตอบกลับบอกว่าไม่เป็นไร ไม่ทำไม่ได้

ทำปฏิกิริยา 16.8 โดยใช้ฟังก์ชั่นส่วนประกอบพร้อม hooks

ในฐานะของ React 16.8 ส่วนประกอบฟังก์ชั่น (เช่นตัวอักษรเพียงฟังก์ชั่นที่ใช้เวลาบางส่วนpropsเป็นอาร์กิวเมนต์สามารถนำมาใช้เป็นถ้าเป็นตัวอย่างของชั้นองค์ประกอบโดยไม่เคยเขียนชั้นเรียน) นอกจากนี้ยังจะได้รับของรัฐผ่านการใช้ตะขอ

หากคุณไม่ต้องการรหัสคลาสเต็มและฟังก์ชั่นอินสแตนซ์เดียวจะทำเช่นนั้นตอนนี้คุณสามารถใช้useStatehook เพื่อทำให้ตัวเองเป็นตัวแปรสถานะเดียวและฟังก์ชั่นอัพเดทซึ่งทำงานเหมือนกับตัวอย่างข้างต้นโดยประมาณsetStateเรียกฟังก์ชัน:

import { useState } from 'react';

function myFunctionalComponentFunction() {
  const [input, setInput] = useState(''); // '' is the initial state value
  return (
    <div>
    <label>Please specify:</label>
    <input value={input} onInput={e => setInput(e.target.value)}/>
    </div>
  );
}

ก่อนหน้านี้ความแตกต่างอย่างไม่เป็นทางการระหว่างคลาสและส่วนประกอบของฟังก์ชั่นคือ "องค์ประกอบของฟังก์ชั่นไม่มีสถานะ" ดังนั้นเราจึงไม่สามารถซ่อนอยู่ข้างหลังนั้นอีกต่อไป: ความแตกต่างระหว่างองค์ประกอบของฟังก์ชั่นและส่วนประกอบของชั้นเรียนเอกสารตอบโต้ที่เขียนด้วยลายมือ(ไม่มีคำอธิบายทางลัดหนึ่งซับเพื่อแปลความหมายให้คุณเข้าใจผิด!) ซึ่งคุณควรอ่านเพื่อให้คุณรู้ว่าคุณกำลังทำอะไรอยู่และสามารถรู้ได้ว่าคุณเลือกโซลูชันที่ดีที่สุด (อะไรก็ตามที่มีความหมายสำหรับคุณ) จากปัญหาที่คุณมี

จัดการเพื่อรับค่าฟิลด์อินพุตโดยทำสิ่งนี้:

import React, { Component } from 'react';

class App extends Component {

constructor(props){
super(props);

this.state = {
  username : ''
}

this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


updateInput(event){
this.setState({username : event.target.value})
}


handleSubmit(){
console.log('Your input value is: ' + this.state.username)
//Send state to the server code
}



render(){
return (
    <div>
    <input type="text" onChange={this.updateInput}></input>
    <input type="submit" onClick={this.handleSubmit} ></input>
    </div>
  );
}
} 

//output
//Your input value is: x

ในการตอบสนองที่ 16 ฉันใช้

<Input id="number" 
       type="time" 
       onChange={(evt) => { console.log(evt.target.value); }} />

ฉันประสบความสำเร็จในการทำเช่นนี้โดยผูก "นี่" กับฟังก์ชัน updateInputValue (evt) ด้วย

this.updateInputValue = this.updateInputValue.bind (นี่);

อย่างไรก็ตามค่าอินพุต = {this.state.inputValue} ... กลายเป็นความคิดที่ดี

นี่คือรหัสเต็มใน babel ES6:

class InputField extends React.Component{


  constructor(props){
   super(props);
   //this.state={inputfield: "no value"};   
   this.handleClick = this.handleClick.bind(this);
   this.updateInputValue = this.updateInputValue.bind(this);
  }

  handleClick(){
   console.log("trying to add picture url");
   console.log("value of input field : "+this.state.inputfield);

  }

  updateInputValue(evt){
    //console.log("input field updated with "+evt.target.value);
    this.state={inputfield: evt.target.value};   

  }

  render(){
    var r; 
    r=<div><input type="text" id="addpixinputfield" 
            onChange={this.updateInputValue} />
      <input type="button" value="add" id="addpix" onClick={this.handleClick}/>
      </div>;    
    return r;
   }
}

ข้อผิดพลาดของคุณเป็นเพราะคุณใช้คลาสและเมื่อใช้คลาสเราจำเป็นต้องผูกฟังก์ชั่นด้วยสิ่งนี้เพื่อให้ทำงานได้ดี อย่างไรก็ตามมีบทช่วยสอนจำนวนมากว่าทำไมเราควร "สิ่งนี้" และ "สิ่งนี้" ทำอะไรในจาวาสคริปต์

หากคุณแก้ไขปุ่มส่งของคุณควรใช้งานได้:

<button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>

และหากคุณต้องการแสดงค่าของอินพุตนั้นในคอนโซลคุณควรใช้ var title = this.title.value

ให้<input>รหัสที่ไม่ซ้ำ

<input id='title' ...>

จากนั้นใช้Web API มาตรฐานเพื่ออ้างอิงใน DOM

const title = document.getElementById('title').value

ไม่จำเป็นต้องอัปเดตสถานะการตอบสนองอย่างต่อเนื่องทุกปุ่มกด เพียงรับค่าเมื่อจำเป็น

// On the state
constructor() {
  this.state = {
   email: ''
 }
}

// Input view ( always check if property is available in state {this.state.email ? this.state.email : ''}

<Input 
  value={this.state.email ? this.state.email : ''} 
  onChange={event => this.setState({ email: event.target.value)}
  type="text" 
  name="emailAddress" 
  placeholder="johdoe@somewhere.com" />

คุณสามารถรับค่าอินพุตได้โดยไม่ต้องเพิ่มฟังก์ชั่น 'onChange'

เพียงเพิ่มองค์ประกอบอินพุต a 'ref attr:

และจากนั้นใช้ไฟล์นี้เพื่อรับค่าอินพุตเมื่อคุณต้องการ

เปลี่ยนการอ้างอิงของคุณเป็น: ref='title'และลบname='title' จากนั้นลบvar title = this.titleและเขียน:

console.log(this.refs.title.value)

นอกจากนี้คุณควรเพิ่ม.bind(this)การthis.onSubmit

(มันใช้งานได้ในกรณีของฉันซึ่งค่อนข้างคล้ายกัน แต่แทนที่จะเป็นonClickฉันonSubmit={...}และวางไว้ในรูปแบบ ( <form onSubmit={...} ></form>))

ถ้าคุณใช้องค์ประกอบระดับแล้วเพียง 3 steps- แรกที่คุณต้องประกาศสถานการณ์สำหรับการป้อนข้อมูลของคุณยื่นเช่นthis.state = {ชื่อ: ''} ประการที่สองคุณต้องเขียนฟังก์ชั่นสำหรับการตั้งค่าสถานะเมื่อมีการเปลี่ยนแปลงในตัวอย่างร้องมันคือsetName ()และในที่สุดคุณต้องเขียนอินพุต jsx เช่น <input value = {this.name} onChange = {this.setName} />

import React, { Component } from 'react'

export class InputComponents extends Component {
    constructor(props) {
        super(props)

        this.state = {
             name:'',
             agree:false
        }
        this.setName = this.setName.bind(this);
        this.setAgree=this.setAgree.bind(this);
    }

    setName(e){
        e.preventDefault();
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    setAgree(){
        this.setState({
            agree: !this.state.agree
        }, function (){
            console.log(this.state.agree);
        })
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.agree} onChange={this.setAgree}></input>
                < input value={this.state.name} onChange = {this.setName}/>
            </div>
        )
    }
}

export default InputComponents

export default class MyComponent extends React.Component {

onSubmit(e) {
    e.preventDefault();
    var title = this.title.value; //added .value
    console.log(title);
}

render(){
    return (
        ...
        <form className="form-horizontal">
            ...
            <input type="text" className="form-control" ref={input => this.title = input} name="title" />
            ...
        </form>
        ...
        <button type="button" onClick={this.onSubmit} className="btn">Save</button>
        ...
    );
}

};

ใช้ฟิลด์ที่ไม่มีการควบคุม:

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        console.log(e.target.neededField.value);
    }

    render(){
        return (
            ...
            <form onSubmit={this.onSubmit} className="form-horizontal">
                ...
                <input type="text" name="neededField" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" className="btn">Save</button>
            ...
        );
    }

};