Question

我正在使用React。在下面的代码中，当我点击重置按钮时，它会清除输入并设置默认值＆＃39;亲爱的。＆＃39;背部。怎么了？为什么它也没有重置Dear .？单击“重置”按钮后，我认为它重新渲染，但未调用console.log('rende');！为什么呢？

import React from 'react';
import { connect } from 'react-redux';

class SearchBar extends React.Component {

constructor(props) {
    super(props);
    console.log('cons');
    this.onInputchange = this.onInputchange.bind(this);
    this.state = { name: 'Dear. ' };
}

onInputchange(event) {
    console.log(event.target.value);
    this.setState({ name: event.target.value });
}

render() {
    console.log('rende');
    return (
        <form className="input-group">
            <input
                className="form-control"
                value={this.state.name}
                onChange={this.onInputchange}
                placeholder="enter the name please "
            />
            <span className="input-group-btn">
                <button type="reset" className="btn btn-secondary">Reset</button>
            </span>
        </form>


     );
    }
}

export default connect()(SearchBar);

Answer 1

你的代码应该是这样的。您没有使用reactjs生命周期＆amp ;;而是直接更改DOM元素。虚拟DOM概念。

fibonacciNumbers

Answer 2

您需要阻止button的默认事件，如果它在form内。<
在React中，通常使用div而非form标记，因为form的默认行为是跳转到下一页。

我使用箭头功能来简化您的代码。

import React from 'react';

class SearchBar extends React.Component {
  state = { name: 'Dear. ' };

onInputchange = event => {
    this.setState({ name: event.target.value });
}

onResetClick = event => {
  event.preventDefault();
  this.setState({ name: 'Dear. ' });
}

render() {
    return (
        <form className="input-group">
            <input
                className="form-control"
                value={this.state.name}
                onChange={this.onInputchange}
                placeholder="enter the name please "
            />
            <span className="input-group-btn">
                <button className="btn btn-secondary" onClick={this.onResetClick}>Reset</button>
            </span>
        </form>


     );
    }
}

export default SearchBar;

Answer 3

type ='reset'的行为不是清除表单元素，而是在加载页面时将它们返回到初始值/默认值。

重置按钮将表单的输入重置为其初始值，而不是   空白。重置按钮用于清除用户的所有输入。

您已使用value={this.state.name}加载了输入，因此默认情况下它在加载时具有自己的值。因此，无论何时单击重置，它都会返回到您传递的默认值。要实际清除表单，您需要使用事件。

为了您的理解，请清除value={this.state.name}至defaultValue=""

现在尝试输入您的输入然后点击重置！你懂了。

check this example

阅读此doc

重置按钮清除输入，但是deosn不重新渲染组件，它是如何工作的？

3 个答案: