Question

我目前正在做出反应，今天早上我遇到了一个我不明白的问题。

我试图通过将函数传递给onSubmit属性来处理来自我的组件的表单提交，但它不会触发它。然后我添加了一个按钮来触发带有onClick属性的模拟函数，我仍然遇到了同样的问题;它似乎比我无法触发我的功能，我找不到谷歌的任何解决方案。

这是我的代码，您可以查看它：

import React from 'react';
import AgentsStore from '../stores/AgentsStore';
import AgentsActions from '../actions/AgentsActions';

class Agents extends React.Component {

constructor(props) {
    super(props);
    this.state = AgentsStore.getState();
    this.onChange = this.onChange.bind(this);
}

componentDidMount() {
    AgentsStore.listen(this.onChange);
}

componentWillUnmount() {
    AgentsStore.unlisten(this.onChange);
}

onChange(state) {
    this.setState(state);
}

handleSubmit(event) {
    event.preventDefault();

    var user = {};

    user.name = this.state.newUser.name.trim();
    user.lastname = this.state.newUser.lastname.trim();

    if (user.name && user.lastname) {
        AgentsActions.createUser(user);
    }
}

onClick() {
    console.log('clicked');
}

render() {

    return (
        <div /*className='container'*/>
            <div className='alert alert-info'>
                Hello from Agents
            </div>

            <div className='panel panel-default'>
                <div className='panel-heading'>Create User</div>
                <div className='panel-body'>
                    <form onSubmit={this.handleSubmit.bind(this)}>
                        <div className='form-group'>
                            <label className='control-label'>Name</label>
                            <input type='text'
                                   className='form-control'
                                   ref='nameTextField'
                                   value={this.state.newUser.name}
                                   onChange={AgentsActions.updateName} />
                        </div>
                        <div className='form-group'>
                            <label className='control-label'>Lastname</label>
                            <input type='text'
                                   className='form-control'
                                   ref='lastnameTextField'
                                   value={this.state.newUser.lastname}
                                   onChange={AgentsActions.updateLastname} />
                        </div>
                        <h4>Address</h4>
                        <button type='submit' className='btn btn-primary'>Submit</button>
                    </form>
                    <button  onClick={this.onClick} className='btn btn-primary'>Submit</button>
                </div>
            </div>
        </div>
    )
}
}

export default Agents;

我不知道我的代码中是否遗漏了某些内容，或者出现了错误，但我有点绝望。另外，我将我的代码基于我拥有的另一个正常工作的文件......

提前感谢您的时间

无法在我的反应应用程序中触发组件的功能

0 个答案: