Question

我在下面为测试React controlled component input功能编写了一个演示。但似乎有一个错误。

＆＃13;

class TestComponent extends React.Component{
  constructor() {
    super();
    this.state = {value: 'beef'};
    this.handleValueChange = this.handleValueChange.bind(this);
  }
  
  handleValueChange(e) {
    this.setState({value: e.target.value});
  }
  render() {
    return <div>
      <div><input type='text' value={'hello world'} onChange={this.handleValueChange}/></div>
      <div><input type='text' value={''} onChange={this.handleValueChange}/></div>
      <div><input type='text' value={this.state.value} onChange={this.handleValueChange}/></div>
      <div><input type='text' value={null} onChange={this.handleValueChange}/></div>
      <div><input type='text' value={undefined} onChange={this.handleValueChange}/></div>
      <hr/>  
      <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div>
      <p>{this.state.value}</p>
    </div>
  }
}

ReactDOM.render(
  <TestComponent />,
  document.body
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

第一个input具有指定字符串值属性。当我输入内容时，请调用handleValueChange函数，结果为hello world + your type thing's first character。

第二个input具有空字符串值属性。当我输入内容时，它调用handleValueChange函数，但最后，它总是给我一个字符。

很奇怪。

更新<！/强> 我添加input与defaultValue，与value={this.state.value}进行比较，我的头很乱......

Answer 1

正如您在问题下方的评论中所提到的：删除value={''}，因为这会在每次呈现时清空输入。

从react docs开始，正确的方法是

return <div>
  <input type='text' value={this.state.value} onChange={this.handleValueChange}/>
  <p>{this.state.value}</p>
</div>

这样，无论何时在输入区域中键入内容，您都将更新状态中设置的值。

如果要渲染具有状态值设置的组件，可以使用：

getInitialState() {
  return { value: 'Your default value'}
}

或者，正如已经建议的那样，使用defaultValue。

在此处阅读更多内容：https://facebook.github.io/react/docs/forms.html

更新

根据您更新的问题，我认为您必须了解在渲染功能期间设置值的实际操作。无论何时在渲染函数期间设置值，您都将“锁定”输入字段为该特定值。这意味着用户输入对渲染元素没有影响。来自文档："User input will have no effect on the rendered element because React has declared the value"。

要解决此问题，您必须将值设置为可以动态更改的值，例如value或this.state.value。就像你在第三个例子中所做的那样：

<input type='text' value={this.state.value} onChange={this.handleValueChange}/>

这样React接受用户输入提供的值，然后更新组件的值。

我仍然认为文档清楚地说明了这一点，我认为你应该在原来的答案中阅读提供的文档。

更新2

要清除controlled和uncontrolled组件的部分：

controlled组件是指定了value属性的组件，它将反映用户输入的值（value prop）。

虽然uncontrolled组件没有分配任何value属性，但不会反映用户输入的值（因为它不提供任何value prop）。但是，如果要使用值实例化uncontrolled组件，则应使用defaultValue。

在您的情况下（因为您尝试使用CONTROLLED组件），这意味着您不应使用defaultValue，并坚持使用controlled组件的正确实现。这是使用value={this.state.value}的实现。

我再次建议您阅读所提供的文档。如果你设法理解文档，实际上并不困难。

希望这能清除你们中的一些问题！：）

Answer 2

使用defaultValue代替value

render() {
return <div>
  <div><input type='text' defaultValue={'hello world'} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={''} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={null} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={undefined} onChange={this.handleValueChange}/></div>
  <p>{this.state.value}</p>
 </div>
 }
}

Answer 3

这里唯一正确的controlled component是：

<input type='text' value={this.state.value} onChange={this.handleValueChange}/>

其他人不受控制。但是，因为其他人正在调用setState并且也在更改值，所以他们正在影响第三个输入。

看看会发生什么：

第一个输入将使用setState调用e.target.value = hello world + first character you typed。这将是第三个输入的新值
第二个输入将仅使用一个字符调用setState，因为该输入的值始终为''。因此，一个字符将是第三个输入的新值
第四个输入与第二个相同
最后一次输入，因为该值设置为undefined ...这与您没有在那里定义任何值相同，因此第四个输入将不会被控制，但每次键入它时都会被复制它是第三个输入的实际值

结论：

要获得受控输入，请始终将值设置为您控制其变化（状态或道具）的值。
使用不同的输入改变状态的相同部分时要小心......理由变得非常复杂。

用空字符串反应受控组件输入值

3 个答案: