Question

嗨，我正在研究React JS应用程序。我已为页面加载时的文本框分配了默认值。应该允许用户更改此设置，但用户不能在文本框中编辑该值。下面是我的代码。

    const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
  <form className={className} onSubmit={handleSubmit}>
    <h2>LSPL (Low Stock Presentation Level)</h2>
    <Line />
    <InputGroup>
      <TextField value="Current" label="LSPL Manual" isEditable="true" />
    </InputGroup>
 </form>
);

下面是我的TextField.js

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = _.uniqueId();
  return (
    <div className={className}>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {getStatusIcon(state)}
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};

有人可以帮助我解决此问题吗？任何帮助，将不胜感激。谢谢

Answer 1

使用不受控制的输入，您可以使用defaultValue

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = 1;
  return (
    <div>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};


const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
  <form>
    <h2>LSPL (Low Stock Presentation Level)</h2>
      <TextField defaultValue="Current" label="LSPL Manual" isEditable="true" />
 </form>
);

class Hello extends React.Component {
  render() {
    return <div><EditStyleFormComponent/></div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这里查看小提琴https://jsfiddle.net/0f6n85ym/

或者，您也可以在受控输入中进行操作。

const TextField = ({
  className,
  label,
  description,
  state,
  errorMessage,
  isEditable,
  spaceAtBottom, // Not used, but we don't want it in otherProps
  ...otherProps
}) => {
  const inputId = 1;
  return (
    <div>
      {label &&
        <label htmlFor={inputId}>{label}</label>
      }
      <div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
        <input
          id={inputId}
          readOnly={!isEditable}
          {...otherProps}
        />
        {errorMessage &&
          <Error>{errorMessage}</Error>
        }
        {description &&
          <Description>{description}</Description>
        }
      </div>
    </div>
  );
};


const EditStyleFormComponent = ({
submitting,
invalid,
value,
onChange
}) => (
  <form>
    <h2>LSPL (Low Stock Presentation Level)</h2>
      <TextField value={value} onChange={onChange} label="LSPL Manual" isEditable="true" />
 </form>
);

class Hello extends React.Component {
constructor(props){
super(props);
   this.state = {
      name: 'Current'
   }
}

onChange = (e)=>{
this.setState({name: e.target.value});
}
  render() {
    return <div><EditStyleFormComponent value={this.state.name} onChange={this.onChange}/></div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这里看到小提琴 https://jsfiddle.net/bshumpy0/

Answer 2

如果未提供值（如果使用受控输入），则可以使用逻辑OR运算符设置defaultValue

喜欢：

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: ''
    };
     this.handleChange = this.handleChange.bind(this)
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }


  render() {
    return (
      <div>
        <TextField value={this.state.value} defaultValue='213' onChange={this.handleChange} />
      </div>
    );
  }
}

在TextField组件中：

<input type='text' value={value || defaultValue} onChange={onChange}/ >

完整示例-https://stackblitz.com/edit/react-4daxck

无法在React JS中更改文本框值

2 个答案: