Question

我正在使用下面的变量。

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

我的输入字段使用它。

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
     <textarea id="inputage" ref={el => this.inputEntry = el} className="form-control"></textarea>
       <button className="btn btn-info" onClick={this.sendthru}>Add</button>

激活{this.sendthru}后，我想清除输入字段。但是，我不确定该怎么做。

此外，如本例所示，我向我指出我应该使用ref属性作为输入值。我不清楚的是{el => this.inputEntry = el}究竟是什么意思。 el在这种情况下有什么意义？

Answer 1

让我假设你已经完成了这个＆＃39;绑定＆＃39; sendThru＆＃39;功能

以下函数会在触发方法时清除输入字段。

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

Refs可以写成内联函数表达式：

ref={el => this.inputTitle = el}

其中el指的是组件。

当refs写成如上所述时，React每次更新都会看到一个不同的函数对象，ref会在用组件实例调用之前立即调用null。

详细了解here。

Answer 2

声明输入标记的值属性（即value= {this.state.name}），如果要清除此输入值，则必须使用this.setState({name : ''})

PFB工作代码供您参考：

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>

Answer 3

我不确定语法{el =＆gt; this.inputEntry = el}，但是当清除输入字段时，你会像你提到的那样分配一个引用。

<input type="text" ref="someName" />

然后在使用完输入值后的onClick功能中，只需使用...

this.refs.someName.value = '';

修改

实际上{el =＆gt; this.inputEntry = el}和我相信的相同。也许有人可以纠正我。 el的值必须从某个地方传入，作为参考。

function (el) { this.inputEntry = el; }

Answer 4

我使用React钩子与@Satheesh有类似的解决方案：

状态初始化：

const [enteredText, setEnteredText] = useState('');

输入标签：

<input type="text" value={enteredText}  (event handler, classNames, etc.) />

在事件处理函数中，使用输入表单中的数据更新对象后，调用：

setEnteredText('');

注意：这被称为“双向绑定”

Answer 5

您可以使用输入type =“ reset”

<form action="/action_page.php">
  text: <input type="text" name="email" /><br />  
  <input type="reset" defaultValue="Reset" />  
</form>

Answer 6

在 React v 16.8+ 之后，你可以使用钩子

import React, {useState} from 'react';

const ControlledInputs = () => {
  const [firstName, setFirstName] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (firstName) {
      console.log('firstName :>> ', firstName);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
          <label htmlFor="firstName">Name: </label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        <button type="submit">add person</button>
      </form>
    </>
  );
};

Answer 7

发生onClick时

Xamarin.Essentials: File Picker

this.state={
  title:''
}

sendthru=()=>{
  document.getElementByid('inputname').value = '';
  this.setState({
     title:''
})
}

Answer 8

你可以使用 useState:

import React, { useState } from 'react';
const [inputTitle, setInputTitle] = useState('');

然后为您的输入组件添加值：

render() {
<input type="text" onChange={(e) => setInputTitle(e.target.value)} 
value={inputTitle} />
<button onClick={handleSubmit} type="submit">Submit</button>
}

关于您的提交处理函数：

setInputTitle('');
 document.querySelector('input').defaultValue = '';

Answer 9

我清除表单输入值的方法是在表单标记中添加一个id。然后，当我处理提交时，我调用this.clearForm（）

在clearForm函数中，我使用document.getElementById（＆＃34; myForm＆＃34;）。reset（）;

import React, {Component } from 'react';
import './App.css';
import Button from './components/Button';
import Input from './components/Input';

class App extends Component {  
  state = {
    item: "", 
    list: []
}

componentDidMount() {
    this.clearForm();
  }

handleFormSubmit = event => {
   this.clearForm()
   event.preventDefault()
   const item = this.state.item

    this.setState ({
        list: [...this.state.list, item],
            })

}

handleInputChange = event => {
  this.setState ({
    item: event.target.value 
  })
}

clearForm = () => {
  document.getElementById("myForm").reset(); 
  this.setState({
    item: ""
  })
}



  render() {
    return (
      <form id="myForm">
      <Input

           name="textinfo"
           onChange={this.handleInputChange}
           value={this.state.item}
      />
      <Button
        onClick={this.handleFormSubmit}
      >  </Button>
      </form>
    );
  }
}

export default App;

用Reactjs清除输入字段？

9 个答案: