Question

如何在fluxible react.js中绑定输入字段？查看todo的示例应用程序，它们在输入框上绑定onchange事件并将其绑定到onchange方法。对多个字段执行相同的技术似乎很乏味 - 为每个字段都有一个单独的方法和事件处理程序。有没有办法在提交时从输入框中获取值？我应该将字段值存储在状态吗？

import React from 'react';
import registerUser from '../actions/registerUser';

class Register extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username:'',
            password:'',
            email:'',
            errorMessage:null
        };
        //this.state = this.getStoreState();
    }


    register = (event, value) => {

        event.preventDefault();
        event.stopPropagation();

        console.log(value);
        let username = this.state.username.trim();
        let password = this.state.password.trim();
        let email = this.state.email.trim();

        if (username && password && email) {
            this.context.executeAction(registerUser, {
                username: username,
                password: password,
                email: email
            });
        } else {
            this.state.errorMessage = "missing required fields"
        }
        this.setState({text: event.target.value});
    };

    //todo handle error and success
    render() {
        return (
            <div>
                {this.state.errorMessage}
                <form className="pure-form pure-form-stacked">
                    <fieldset>
                        <legend>Register</legend>
                        <input type="email" placeholder="Email" />
                        <input type="text" placeholder="Username" />
                        <input type="password" placeholder="Password" />
                        <button onClick={this.register} type="submit" className="pure-button pure-button-primary">Sign Up</button>
                    </fieldset>
                </form>
            </div>
        );
    }
}

export default Register;

Answer 1

为输入创建一个组件，如此。

import React from 'react';

import Actions from './../flux/Actions';
import JInput from './common/jInput';

import BasicStore from './../flux/Basic.Store';

let AppCtrlSty = {
	height: '100%',
	padding: '0 10px 0 0'
}

let checkBoxSty = {
	boxSizing: 'border-box',
	display: 'inline-block',
	lineHeight: '18px',
	marginLeft: '2px',
	outline: 'none',
	position: 'relative'
};

let radioSty = {color: "blue"}

let input3Sty = {color: 'green'};

let inputLabel = {margin: '0 5px'};

let textInput1 = {name: 'text', type: 'text', textValue: '', focus: true};
let checkInput1 = {name: 'checkbox', type: 'checkbox', style: checkBoxSty};
let colorInput = {name: 'color', type: 'color'};
let numberInput = {name: 'number', type: 'number', min: 0, max: 100};
let rangeInput = {name: 'range', type: 'range', min: 0, max: 100};

let radioInput1 = {name: 'radioGroup', type: 'radio', radioValue: 'set'};
let radioInput2 = {name: 'radioGroup', type: 'radio', radioValue: 'setkey'};
let radioInput3 = {name: 'radioGroup', type: 'radio', radioValue: 'key'};

class AppCtrlRender extends React.Component {
 	render() {
 		let inputData = this.state.data;

		textInput1.textValue = inputData.text;
		checkInput1.checkedValue = inputData.checkbox;
		colorInput.colorValue = inputData.color;
		numberInput.numberValue = inputData.number;
		rangeInput.numberValue = inputData.range;

		let currentRadioGroupValue = this.state.data.radioGroup;
		radioInput1.radioChecked = (currentRadioGroupValue == radioInput1.radioValue);
		radioInput2.radioChecked = (currentRadioGroupValue == radioInput2.radioValue);
		radioInput3.radioChecked = (currentRadioGroupValue == radioInput3.radioValue);

		let selected = inputData.checkbox ? 'true' : 'false';
		let radioGroupName1 = 'key1'; //must be distinct for each use of JRadioGroup
		let radioValue = inputData.radioGroup;
		return (
			<div id='AppCtrlSty' style={AppCtrlSty}>
				React 1.4 Form input<br/><br/>
				Text: <JInput input={textInput1} handleChange={this.handleValueChange} /><br/><br/>
				Checkbox: <JInput input={checkInput1} handleChange={this.handleValueChange} /> Value: {selected}<br/><br/>
				Color: <JInput input={colorInput} handleChange={this.handleValueChange} /> Value: {colorInput.colorValue}<br/><br/>
				Number: <JInput input={numberInput} handleChange={this.handleValueChange} /> Value: {numberInput.numberValue}<br/><br/>
				Range: <JInput input={rangeInput} handleChange={this.handleValueChange} /> Value: {rangeInput.numberValue}<br/><br/>

				Radio Input: &nbsp;
				<JInput input={radioInput1} handleChange={this.handleValueChange} />&nbsp;Set &nbsp;
				<JInput input={radioInput2} handleChange={this.handleValueChange} />&nbsp;Set/Key &nbsp;
				<JInput input={radioInput3} handleChange={this.handleValueChange} />&nbsp;Key &nbsp;
				Value: {radioValue}
			</div>
		);
	}
}

function getState() { return {data: BasicStore.getData()}; };

export default class AppCtrl extends AppCtrlRender {
	constructor() {
	  super();
		this.state = getState();
	}

	componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange); }
	componentWillUnmount() { this.unsubscribe(); }

	storeDidChange = () => { this.setState(getState()); }
	handleValueChange = (name, value) => { Actions.editRecord(name, value); }
}

import React from 'react';

class JInputRender extends React.Component {
 	render() {
		let inputSty = this.props.input.style ? this.props.input.style : {color: 'red'};
		let textValue = this.state.textValue;
		let colorValue = this.props.input.colorValue ? this.props.input.colorValue : '#1A3212';
		let checkedValue = (this.props.input.checkedValue != null) ? this.props.input.checkedValue : false;
		let numberValue = this.props.input.numberValue ? this.props.input.numberValue : 0;
		let radioValue = this.props.input.radioValue ? this.props.input.radioValue : '';
		let radioChecked = (this.props.input.radioChecked != null) ? this.props.input.radioChecked : false;
		let min = this.props.input.min ? this.props.input.min : 0;
		let max = this.props.input.max ? this.props.input.max : 100;
		let step = this.props.input.step ? this.props.input.step : 1;
		let inputType = this.props.input.type ? this.props.input.type : 'text';

		let returnRadio = (
				<input
					ref="inputRef"
					type={inputType}
					style={inputSty}
					checked={radioChecked}
					value={radioValue}
					onChange={this.handleValueChange} />
			)

		let returnChecked = (
				<input
					ref="inputRef"
					type={inputType}
					style={inputSty}
					checked={checkedValue}
					onChange={this.handleCheckedChange} />
			)

		let returnColor = (
				<input
					type={inputType}
					ref="inputRef"
					style={inputSty}
					value={colorValue}
					onChange={this.handleValueChange} />
			)

		let returnNumber = (
				<input
					type={inputType}
					ref="inputRef"
					style={inputSty}
					value={numberValue}
					min={min} max={max} step={step}
					onChange={this.handleValueChange} />
			)

		let returnText = (
				<input
					type={inputType}
					ref="inputRef"
					style={inputSty}
					value={textValue}
					onChange={this.handleTextValueChange} />
			)
		let returnIt = {};
		switch (inputType) {
			case 'checkbox': returnIt = returnChecked; break;
			case 'radio': returnIt = returnRadio; break;
			case 'color': returnIt = returnColor; break;
			case 'number':
			case 'range': returnIt = returnNumber; break;
			default: returnIt = returnText; break;
		}

		return (returnIt);
	}
}

export default class JInput extends JInputRender {
	constructor() {
	  super();
		this.state = {textValue: ''};
	}

	componentDidMount = () => {
		if (this.props.input.textValue) this.setState({textValue: this.props.input.textValue});
		if (this.props.input.focus) this.refs.inputRef.focus();
	}
	componentWillReceiveProps = (nextProps) => {
		if (nextProps.input.textValue && (this.state.textValue != nextProps.input.textValue))
			{this.setState({textValue: nextProps.input.textValue});}
	}

	handleCheckedChange = (event) => { this.props.handleChange(this.props.input.name, event.target.checked); }
	handleTextValueChange = (event) => {
		let newValue = event.target.value;
		this.setState({textValue: newValue});
		this.props.handleChange(this.props.input.name, newValue);
	}
	handleValueChange = (event) => { this.props.handleChange(this.props.input.name, event.target.value); }
}

如何在fluxible react.js中绑定输入字段

1 个答案: