javascript - 用空字符串 react 受控组件输入值

Question

我在下面为测试 React controlled component input 特性写了一个 demo。但似乎有一个错误。

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
)

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

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

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

这很奇怪。

更新了! 我用 defaultValue 添加了一个 input，与 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

---

更新:

根据您更新的问题，我认为您必须了解在渲染函数期间设置值的实际作用。每当您在渲染函数期间设置一个值时，您都会将输入字段“锁定”为该特定值。这意味着用户输入对呈现的元素没有影响。来自文档:“用户输入对呈现的元素没有影响，因为 React 已声明该值”。

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

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

通过这种方式，React 接受用户输入提供的值，然后更新组件的值。

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

---

更新 2

稍微理清controlled和uncontrolled部分:

controlled 组件是分配了 value 属性的组件，它将反射(reflect)用户输入的值(value prop ).

虽然 uncontrolled 组件没有分配任何 value 属性，并且不会反射(reflect)用户输入的值(因为它不提供任何 value Prop )。但是如果你想用一个值实例化一个uncontrolled组件，你应该使用defaultValue。

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

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

希望这能解决你们中的一些问题! :)