IT技术 - react输入元素：值与默认值 - 吾爱随笔录

react输入元素：值与默认值

IT技术 javascript reactjs frontend

2021-04-19 17:56:17

我是 React 和 REDUX 的新手，我只是开发了一个简单的 React 应用程序，现在我面临一个问题，当我在组件中呈现输入元素时，如果我将元素设置为“值”，它将变为只读，但如果我设置了“defaultValue”上的值当我重新更新我的状态时它永远不会再次更新。

这是我的代码：

    import React from "react";
    export default class EditForm extends React.Component {

    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
        var {amount}=this.props.transaction;
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

然后我发现我是否通过添加onChange={(value) => this.onChange(value)}输入元素来解决这个错误，它可以正常工作（它会在props或状态更新时更新，我可以重新输入值），但我认为这不是一个正确的解决方案，因为它会导致我的浏览器控制台出错。这是因为“this.onChange”函数不存在。

请帮助我解决这个问题，并提前致谢

问候，

维迪

3个回答

您的输入不起作用的原因是因为您需要实际使用更新值define的onChange函数sets the state。您可能可以内联进行，因为它只需要像这样的语句

<input type="text" value={this.state.inputVal} onChange={(e) => {this.setState({inputVal: e.target.value})}} />

但是我建议您使用一种onChange方法，因为您可以使用它处理多个输入并且看起来更干净

class EditForm extends React.Component {

    constructor() {
        super();
        this.state = {
        
        }
    }
    onChange(e) {
         this.setState({[e.target.name]: e.target.value})
    }
    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
       
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={this.state.amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                         <input value={this.state.amount1} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount1" name="amount1" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditForm/>, document.getElementById('app'));

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

谢谢你的快速回复，如果我不想在这个组件中设置状态怎么办？因为我使用的是 REDUX，所以所有状态都在我的减速器中，它加载在我的 index.js（调用这个 EditForm 组件的 js 文件）上。这就是为什么我从 props 加载该值的原因，是否有任何解决方案可以调用内联函数返回类似行为的错误，但不会在浏览器控制台中作为错误捕获？非常感谢你

2021-06-11 17:56:17

Redux 最佳实践是将 ui 状态置于本地状态而不是 redux 存储中。但是，如果您想使用 redux 存储，那么您可以在我设置状态的 onChange 函数中调度一个动作，该动作将调用减速器来更改状态。问我你是否遇到任何问题

2021-06-12 17:56:17

@ShubhamKhatri 是的。我面临的问题是我第一次设置了值，现在我正在通过 onChange 函数上的 setState 更改该值。现在我也可以选择取消。我将如何获得最初在取消时设置的值？因为它更新了新值？

2021-06-12 17:56:17

@SaifAliKhan 通过重置您的意思是您所做的任何更改都将它们还原

2021-06-13 17:56:17

如果我可以选择取消，您将如何将其重置为原始值？

2021-06-18 17:56:17

您需要定义一个 onChange 方法，如果您使用的是 redux，它可能是一个通过 reducer 更新组件状态的操作。下面显示了使用带有 es6 的简单状态的更简单的方法。此外，您正在从refFacebook 不鼓励的输入字段中获取值。这也应该给你一个错误，因为你试图控制和不受控制的组件。

这是表单文档的链接以供进一步阅读。

class Foo extends React.Component { 
  constructor(props) {
    super(props);
    this.state = ({
      inputVal: '',
    });
  }
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.inputVal);
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.inputVal} onChange={this.onChange} />
      </div>
    );
  }
}

2021-05-30 17:56:17

我正在修补这个并找到了一个非常简单的解决方案：

class App extends Component {

constructor(props) {
    super(props)
    this.enterText = this.enterText.bind(this)
    this.state = {
        userNameText: 'user name',
        pswdText: 'pswd',
        textEntry: false
    }
}

async enterText() {
    if (!this.state.textEntry) {
        await this.clearText()
        this.setState({textEntry: true})
    }
}

clearText() {
    this.setState({
        userNameText: '',
        pswdText: ''
    })
}

render() {
    return (
        <div className="App">
            <div className="App-header">
                <h1 className="App-title">
                    Welcome
                </h1>
            </div>
            <div className="login-fields">
                <LoginFields userNameText={this.state.userNameText} pswdText={this.state.pswdText} onFocus={this.enterText} />
            </div>
        </div>
    )
}
}

因此，在初始 render() 时，字段的状态是构造函数中硬编码的任何内容。当用户单击 name 或 pswd 框时（它们很容易被分开），两者都用 clearText() 清除，然后用 allowText() 将两者设置为 null。一旦设置为 null，用户输入的文本就会被接受。

确保 LoginFields 组件在输入中有这个：

onFocus={this.props.onFocus}

其它你可能感兴趣的问题

上一篇让 Webpack 不捆绑文件下一篇是否可以在 React JS 中使用 async/await？