Question

我正在尝试我的第一部分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*，但我只是想让这个有效。）

Answer 1

使用<?php $to = "somobe@yahoo.ca"; $subject = "I am sending an image"; $txt = "Body of the message (can be a html or text/plain)"; $headers = "From: someone else"; $attachment= "image.jpg";// just like this in the root folder of your script, if you have your image in another folder then just write the path. wp_mail($to,$subject,$txt,$headers,$attachment); ?>会使您无法输入输入字段。您应该使用value={whatever}。

请参阅https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

另外，defaultValue="Hello!"应该是onchange，正如@davnicwil指出的那样。

Answer 2

您尚未正确填写onchange中的input道具。它在JSX中必须是onChange。

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

将value道具传递给<input>，然后以某种方式更改使用onChange处理程序响应用户交互而传递的值的主题是非常好的考虑{{3 }}。

他们将此类输入称为in the docs，并引用输入，而是让DOM本身处理输入的值以及用户随后的更改Controlled Components。

每当您将value的{{1}}道具设置为某个变量时，就会有一个受控制的组件。这意味着你必须通过某些程序化方式更改变量的值，否则输入将始终保持该值并且永远不会更改，即使您键入 - 输入的本机行为，也要更新它的输入价值是由React在这里重写。

所以，你正确地从状态中获取该变量，并且有一个处理程序来更新状态，所有设置都很好。问题是因为您有input而没有正确的onchange处理程序从未被调用过，所以当您输入输入时，onChange永远不会被更新。当您使用value处理程序时，在您输入时会更新onChange ，并且您会看到更改。

Answer 3

这可能是因为onChange函数没有更新输入中提到的正确值。

示例：

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

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

onChange函数中的

更新提到的值字段。

Answer 4

我也有同样的问题，在我的情况下我正确地注入了减速器，但我仍然无法输入字段。事实证明，如果您使用immutable，则必须使用redux-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。请参阅此issue

Answer 5

defaultValue 而不是 value 为我工作。

Answer 6

对我来说，以下简单的更改非常有效

<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!! */}

Answer 7

在类组件上下文中...

如果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>

这解决了我的“无法在React输入文本字段中键入”问题。

Answer 8

我也面临着现在解决的问题。将onChange赋予searchTool。那么那个问题将为您解决。

Answer 9

一旦我遇到类似的错误。让我描述一下。

Edit.js

   // components returns edit form 
   
   function EditVideo({id}) {
   .....
   
   // onChange event listener 
    const handleChange = (e) => {
       setTextData({
           ...textData,
           [e.target.name]: e.target.value.trim()
        });
     }
  
   ....
   ...
   }
)

ImportEdit.js

   import Edit from './Edit';
   
    function ImportEdit() {
    ......
     ...
    return (
        <div>
            <EditVideo id={id}/>
        </div>
       )
    }

    export default ImportEdit

问题是： 我无法使用空格键（即，如果按空格键，则看不到空格输入）

错误： .trim（）

.trim（）方法正在修剪我键入的所有空白

注意：单独使用Edit.js无需导入即可正常工作

无法输入React输入文本字段

9 个答案:

如果changeHandler方法是常规函数：

如果changeHandler方法是箭头函数：