ไม่สามารถพิมพ์ในช่องป้อนข้อความตอบสนอง

ฉันพยายามที่บิตแรกของ React.js และกำลังนิ่งงันในช่วงต้น ... <div id="search"></div>ฉันมีโค้ดด้านล่างซึ่งทำให้ฟอร์มการค้นหาลงใน แต่การพิมพ์ในช่องค้นหาไม่ทำอะไรเลย

มีบางอย่างที่อาจขาดหายไปโดยผ่านอุปกรณ์ประกอบฉากและขึ้นลงและดูเหมือนว่าจะเป็นปัญหาทั่วไป แต่ฉันนิ่งงัน - ไม่เห็นว่ามีอะไรหายไป

var SearchFacet = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.searchStringInput.value
    )
  },
  render: function() {
    return (
      <div>
        Search for:
        <input
          type="text"
          value={this.props.searchString}
          ref="searchStringInput"
          onchange={this.handleChange} />
      </div>
    );
  }
});

var SearchTool = React.createClass({
  render: function() {
    return (
      <form>
        <SearchFacet 
          searchString={this.props.searchString}
          onUserInput={this.props.onUserInput}
         />
        <button>Search</button>
      </form>
    );
  }
});

var Searcher = React.createClass({
  getInitialState: function() {
    return {
      searchString: ''
    }
  },

  handleUserInput: function(searchString) {
    this.setState({
      searchString: searchString
    })
  },

  render: function() {
    return (
      <div>
        <SearchTool 
          searchString={this.state.searchString}
          onUserInput={this.handleUserInput}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <Searcher />,
  document.getElementById('searcher')
);

(ในที่สุดฉันก็จะมีประเภทอื่นSearchFacet*แต่ฉันแค่พยายามทำให้อันนี้ใช้งานได้)

คุณไม่ได้ใส่onchangeเสาของคุณอย่างถูกต้องในไฟล์input. ต้องอยู่onChangeใน JSX

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>  

หัวข้อของการผ่านvalueเสาไปยัง<input>แล้วอย่างใดเปลี่ยนค่าผ่านในการตอบสนองต่อการโต้ตอบผู้ใช้ใช้onChangeจัดการสวยทั้งพิจารณาในเอกสาร

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

เมื่อใดก็ตามที่คุณตั้งvalueเสาของinputตัวแปรบางคุณมีชิ้นส่วนที่ควบคุม ซึ่งหมายความว่าคุณต้องเปลี่ยนค่าของตัวแปรด้วยวิธีการทางโปรแกรมมิฉะนั้นอินพุตจะเก็บค่านั้นไว้ตลอดเวลาและจะไม่เปลี่ยนแปลงแม้ว่าคุณจะพิมพ์ก็ตาม - พฤติกรรมดั้งเดิมของอินพุตเพื่ออัปเดตค่าในการพิมพ์จะถูกแทนที่โดย React ที่นี่

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

การใช้value={whatever}จะทำให้คุณไม่สามารถพิมพ์ในช่องป้อนข้อมูลได้ คุณควรใช้defaultValue="Hello!".

ดูhttps://facebook.github.io/react/docs/uncontrolled-components.html#default-values

นอกจากนี้onchangeควรเป็นไปonChangeตามที่ @davnicwil ชี้ให้เห็น

ซึ่งอาจเกิดจากฟังก์ชัน onChange ไม่ได้อัปเดตค่าที่เหมาะสมซึ่งระบุไว้ในอินพุต

ตัวอย่าง:

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

 changeText(event){
        this.setState(
            {textValue : event.target.value}
        );
    }

ในฟังก์ชัน onChange ให้อัพเดตฟิลด์ค่าที่กล่าวถึง

ฉันก็มีปัญหาเดียวกันเช่นกันและในกรณีของฉันฉันฉีดยาลดอย่างถูกต้อง แต่ฉันก็ยังพิมพ์ฟิลด์ไม่ได้ แต่กลับกลายเป็นว่าคุณกำลังใช้คุณต้องใช้immutableredux-form/immutable

import {reducer as formReducer} from 'redux-form/immutable';
const reducer = combineReducers{

    form: formReducer
}
import {Field, reduxForm} from 'redux-form/immutable';
/* your component */

ขอให้สังเกตว่ารัฐของคุณควรจะเป็นเหมือนมิฉะนั้นคุณจะต้องปรับแต่งอย่างชัดเจนห้องสมุดยังเป็นชื่อของรัฐควรจะเป็นstate->form formดูปัญหานี้

สำหรับฉันการเปลี่ยนแปลงง่ายๆต่อไปนี้ทำงานได้อย่างสมบูรณ์แบบ

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

เปลี่ยน ... value = {myPropVal} เป็น ... defaultValue = {myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

ในบริบทส่วนประกอบของคลาส ...

หากเมธอด changeHandler เป็นฟังก์ชันปกติ:

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

ก็ใช้ได้เช่นนี้ ...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

ถ้าเมธอด changeHandler เป็นฟังก์ชันลูกศร:

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

ก็ใช้ได้แบบนี้ ... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

และสิ่งนี้ช่วยแก้ปัญหา "Can't type in React input text field" ของฉัน